Angular 2 "* ngIf" nicht bindend

Question

Das folgende Skript oder ein Teil davon sollte die Verbindung anderer Anbieter mit Facebook über Firebase herstellen. Das Problem ist jedoch nicht Firebase Funktionalität, sondern mit Angular 2 auf Ionic 2. Ich habe eine zwei bedingte Layout, wo ein Boolean sollte eine Schaltfläche verstecken und zeigen Sie die andere, und umgekehrt.

Die home.html Vorlage ist wie folgt:

<ion-header> 
    <ion-navbar> 
    <ion-title> 
    User logged in 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <ion-card *ngIf="user"> 
    <img *ngIf="user.photoURL" [src]="user.photoURL" /> 
    <ion-card-content> 
     <ion-card-title> 
     {{ user.displayName }} 
     </ion-card-title> 
     <p> 
     User's UID is {{user.uid}} and the email is {{user.email}} 
     </p> 
    </ion-card-content> 
    <button *ngIf="hasFacebook" ion-button (click)="checkinFB()">Check in on FB</button> 
    <button *ngIf="!hasFacebook" ion-button (click)="linkWithFB()">Link with FB</button> 
    <button ion-button (click)="doLogout()">Logout</button> 
    </ion-card> 
</ion-content> 

Während die Typoskript Komponente ist:

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    user; 
    public hasFacebook: boolean = false; 
    FB_APP_ID: number = xxxxxxxxxxxxxxx; 

    constructor(public navCtrl: NavController, public geofenceTracker: GeofenceTracker, public authData: AuthData) { 
     this.user = AuthData.getUser(); 
     let self = this; 
     if (this.user.hasOwnProperty('providerData')) { 
      this.user.providerData.some(function (provider) { 
       if (provider.providerId == 'facebook.com') { 
        self.hasFacebook = true; 
        return self.hasFacebook; 
       } 
      }); 
     } 
     console.log(this.hasFacebook); 
     this.geofenceTracker.addGeofence(); 
     Facebook.browserInit(this.FB_APP_ID, "v2.8"); 
    } 

    linkWithFB() { 
     let permissions = ["email", "public_profile", "user_friends"]; 
     Facebook.login(permissions) 
      .then((response) => { 
       let facebookCredential = firebase 
        .auth 
        .FacebookAuthProvider 
        .credential(response.authResponse.accessToken); 
       this.authData.linkWithFB(facebookCredential) 
        .then((user) =>{ 
         console.log("Account linking success" + JSON.stringify(user)); 
         console.log(this.toString()); 
         this.hasFacebook = true; 
         //window.location.reload(); 
        }, function (error) { 
         console.log("Account linking error", error); 
        }); 
      }, function (error) { 
       console.log("Account linking error", error); 
      }); 
    } 

Das Problem auf der linkWithFB() Funktion ist, dass, obwohl es die „hasFacebook aktualisiert "Variable, es spiegelt nicht die Änderung des Layouts wider. Ich habe Lambda-Ausdrücke verwendet, um den "this" -Bereich aufrechtzuerhalten, und ich habe sogar mit der "self = this" -Deklaration oben auf der Funktion versucht, aber ohne Erfolg.

Wie Sie auf dem kommentierten Teil sehen können, war die einzige Lösung im Moment, die Seite neu zu laden, nachdem die Verknüpfung erfolgreich war.

Danke

Answer 1

Sehen Sie, ob funktioniert.

Als Beispiel ausführen diese gist

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage implements OnDestroy { 

    user; 
    public hasFacebook: boolean = false; 
    FB_APP_ID: number = xxxxxxxxxxxxxxx; 
    hasFacebook$ : Subject<any> = new Subject(); 
    destroy$ : Subject<any> = new Subject(); 

    constructor(public navCtrl: NavController, public geofenceTracker: GeofenceTracker, public authData: AuthData) { 

    // SUBSCRIBE TO THE EVENT 
    this.hasFacebook$ 
     .takeUntil(this.destroy$) 
     .subscribe(hasFaceBook => this.hasFacebook = hasFaceBook); 

    this.user = AuthData.getUser(); 
    let self = this; 
    if (this.user.hasOwnProperty('providerData')) { 
     this.user.providerData.some(function (provider) { 
     if (provider.providerId == 'facebook.com') { 
      self.hasFacebook = true; 
      return self.hasFacebook; 
     } 
     }); 
    } 
    console.log(this.hasFacebook); 
    this.geofenceTracker.addGeofence(); 
    Facebook.browserInit(this.FB_APP_ID, "v2.8"); 
    } 

    linkWithFB() { 
    let permissions = ["email", "public_profile", "user_friends"]; 
    Facebook.login(permissions) 
     .then((response) => { 
     let facebookCredential = firebase 
      .auth 
      .FacebookAuthProvider 
      .credential(response.authResponse.accessToken); 
     this.authData.linkWithFB(facebookCredential) 
      .then((user) => { 
      console.log("Account linking success" + JSON.stringify(user)); 
      console.log(this.toString()); 

      // EMIT A NEW VALUE TO THE SUBJECT 
      this.hasFacebook$.next(true); 

      //window.location.reload(); 
      }, function (error) { 
      console.log("Account linking error", error); 
      }); 
     }, function (error) { 
     console.log("Account linking error", error); 
     }); 
    } 

    ngOnDestroy(){ 
    this.destroy$.next(); 
    this.destroy$.unsubscribe(); 
    } 

}