プロパティが観測

Question

内の変化を検出していないバインディング

のselectedIndex属性がインデックスプロパティにバインドされています。 以下に示すように、AngularFireAuth observable内で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() { 
    } 

} 

Answer 1

EDIT：私は今の周りにこの作品を使用するあなたは、このように手動で変更検知をトリガーすることができます。この問題を解決するには

。 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); 
    } 


} 

Answer 2

を提出された更新はangulars zoneの外にある観測nextまたはcomplete関数の内部で起こるので、これが最も可能性が高いです。これは、変更の検出がトリガされず、DOMが更新されないことを意味します。

import { ChangeDetectorRef } from '@angular/core'; 

constructor(private cdr: ChangeDetectorRef) {} 

afAuth.authState.subscribe((fbuser: firebase.User) => { 
    if (!fbuser) { 
    this.index = 0; 
    this.cdr.detectChanges(); // run change-detection manually 
    } 
    else { 
    this.index = 1; 
    this.cdr.detectChanges(); // run change-detection manually 
    } 
});