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

看看是否有效。

作为一个例子，执行这个要点

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