Javascript 角度2“*ngIf“；不具约束力

下面的脚本，或者部分脚本，应该通过Firebase将其他提供商与Facebook连接起来。问题不是Firebase的功能，而是离子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>

问题在于linkWithFB（）函数，即使它更新了“hasFacebook”变量，也不能反映布局上的更改。我使用lambda表达式来维护“this”范围，甚至尝试在函数顶部使用“self=this”声明，但没有效果

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

谢谢

看看是否有效

例如，执行以下命令

@组件({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页实现OnDestroy{
用户；
public:boolean=false；
FB_应用程序_ID:编号=xxxxxxxxxxxxx；
hasFacebook$：Subject=新主题（）；
销毁$：主题=新主题（）；
构造函数（公共navCtrl:NavController、公共geofenceTracker:geofenceTracker、公共authData:authData）{
//订阅活动
这是Facebook$
.takeUntil（此.destroy$）
.subscribe（hasFaceBook=>this.hasFaceBook=hasFaceBook）；
this.user=AuthData.getUser（）；
让自我=这个；
if（this.user.hasOwnProperty（'providerData'））{
this.user.providerData.some（函数（提供程序）{
如果（provider.providerId=='facebook.com'）{
self.hasFacebook=true；
返回self.hassfacebook；
}
});
}
log（this.hasFacebook）；
这是.geofensetracker.addgeofense（）；
Facebook.browserInit（this.FB_APP_ID，“v2.8”）；
}
linkWithFB（）{
let permissions=[“email”、“public_profile”、“user_friends”]；
Facebook.login（权限）
。然后（（响应）=>{
让facebookCredential=firebase
作者
.FacebookAuthProvider
.credential（response.authResponse.accessToken）；
this.authData.linkWithFB（facebookCredential）
。然后（（用户）=>{
log（“账户链接成功”+JSON.stringify（用户））；
console.log（this.toString（））；
//向主题发出新值
this.hasFacebook$.next（true）；
//window.location.reload（）；
}，函数（错误）{
console.log（“账户链接错误”，错误）；
});
}，函数（错误）{
console.log（“账户链接错误”，错误）；
});
}
恩贡德斯特罗（）{
this.destroy$.next（）；
此.destroy$.unsubscribe（）；
}
}

this.toString（）的结果是什么？它只显示一个[Object]输出，而JSON字符串化它时，会给出一个“TypeError:将循环结构转换为JSON”。您认为它可能不会更新组件的“hasReference”吗？它实际上应该给出一个“不能设置未定义”或类似的东西，我认为。控制台日志记录hasReference显示实际值“true”。ThanksI想确定

这个
是组件，听起来像是，所以我不认为这是一个范围问题。它给出了一个传输错误：类型“Subject”不可分配给类型“Subject”。类型“{}”不能分配给类型“boolean”。哦！抱歉应该是any类型。我更新答案
@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);
            });
    }

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

}