从内部的角度更新变量视图Angular 4

Question

我有以下代码：

    <div class="row" *ngIf="!isFacebookAuth">
       <div class="col-md-8 col-md-offset-2 text-center">
           <p>To start using Gili-go, simply login using facebook, give us a contact number for our drivers, and you're good to go!</p>
           <button class="btn btn-primary" (click)="loginFacebook()"><i class="fa fa-facebook"></i> Login With Facebook</button>
       </div>
   </div>
   <div class="row" *ngIf="isFacebookAuth">
      <p>test </p>
   <div>

然后我的控制器：

loginFacebook(){
   this.userService.signInWithFaceBook()
   .then((data) => {
      this.isFacebookAuth = true;
      console.log(data);
   })
  .catch(error => console.log(error));
}

login函数使用firebase2，其中返回promise。

控制器中的值会按原样更改，但由于某种原因，视图侧的isFacebookAuth变量不会更新，并且两个Div根本不会更改。

我认为这是因为变量是从firebase返回的promise中更改的。但我该如何解决这个问题呢？

Answer 1

您可以通过调用detectChanges()类的ChangeDetectorRef来触发更新视图的更改检测。

在您的组件中，

import { ChangeDetectorRef } from '@angular/core';

constructor(private ref: ChangeDetectorRef) {}

loginFacebook(){
   this.userService.signInWithFaceBook()
   .then((data) => {
      this.isFacebookAuth = true;
      console.log(data);
      this.ref.detectChanges(); // triggers another change detection cycle
   })
  .catch(error => console.log(error));
}