Angular 2“*ngIf”不绑定

Question

下面的脚本或其中的一部分应该通过 Firebase 将其他提供商与 Facebook 链接起来。问题不是 Firebase 的功能，而是 Ionic 2 上的 Angular 2。 我有两个条件布局，布尔值应该隐藏一个按钮并显示另一个按钮，反之亦然。

home.html 模板如下：

<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>

虽然打字稿组件是：

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

问题出在 linkWithFB() 函数上，即使它更新了“hasFacebook”变量，它也没有反映布局上的变化。我使用 lambda 表达式来维护“this”范围，甚至尝试在函数顶部使用“self = this”声明，但无济于事。

正如您在评论部分看到的那样，目前唯一的解决方案是在链接成功后重新加载页面。

谢谢

Answer 1

看看是否有效。

作为一个例子执行这个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();
  }

}