Angular 2" * ngIf"不约束

时间:2017-01-18 18:07:18

标签: javascript angular typescript firebase ionic2

下面的脚本或其中的一部分应该通过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()函数,即使它更新了&#34; hasFacebook&#34;变量,它不反映布局的变化。我使用lambda表达式来维护&#34;这个&#34;范围,我甚至尝试使用&#34; self = this&#34;声明在功能的顶部,但无济于事。

正如您在注释部分中看到的那样,现在唯一的解决方案是在链接成功后重新加载页面。

由于

1 个答案:

答案 0 :(得分:-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();
  }

}