0

selectedIndex属性はindexプロパティにバインドされています。以下に示すように、AngularFireAuth オブザーバブル内で index プロパティが変更された場合、ビューは更新されません。なぜだめですか？観測可能な範囲外であればどこでも問題なく動作します。.ts および .html ファイルを以下に示します。

ここにhtmlファイルがあります

<ion-tabs [selectedIndex]="index">
    <ion-tab [root]="t0" tabTitle =" My Account" tabIcon="body"></ion-tab>    
    <ion-tab [root]="t1" tabTitle ="Sections" tabIcon="home"></ion-tab>
</ion-tabs>

ここに.tsファイルがあります

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase'

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  index = 0;
  t0 = "AccountPage";
  t1 = "HomePage";

  constructor(public navCtrl: NavController, public navParams: NavParams, public afAuth: AngularFireAuth) {

    afAuth.authState.subscribe((fbuser: firebase.User) => {
      if (!fbuser) {
        this.index = 0;
        console.log(this.index)
      }
      else {
        this.index = 1;
        console.log(this.index)
      }
    });
// setting the index outside the observable works normally
  }

  ionViewDidLoad() {
  }

}
4

2 に答える 2

0

編集：今のところ、この回避策を使用します。selectedIndex 属性を手動で設定します。

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase'
import { Tabs } from 'ionic-angular/navigation/nav-interfaces';

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',

})
export class TabsPage  {
  @ViewChild('myTabs') tabRef: Tabs;

  t0 = "AccountPage";
  t1 = "HomePage";
  fbuser2: firebase.User;

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public afAuth: AngularFireAuth) {

    this.afAuth.authState.subscribe((fbuser: firebase.User) => {
      if (!fbuser) {
        this.setIndex(0);
      }
      else {
        this.setIndex(1);        
      }
    });

  }
  setIndex(i: number) { 
    this.tabRef.select(i);
   }


}
于 2017-10-09T10:32:18.977 に答える