javascript - Angular 绑定(bind)在可观察调用之前没有改变

Question

我正在使用 Angular 4+，我注意到当 Observable 立即解析(同步？)时，在我调用 Observable.subscribe() 之前，Angular 没有更新绑定(bind)值。 在其他地方，这工作得很好，因为网络调用将 Observable 完成延迟了足够长的时间，以便初始绑定(bind)更改在 Angular 中生效。

https://plnkr.co/edit/LV0On7?p=preview

//our root app component
import {Component, VERSION} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{name}}</h2>
      <button class="btn btn-primary" (click)="onAlertClickedNoDelay()">Call Observable Without Delay</button>
      <button class="btn btn-primary" (click)="onAlertClickedDelay()">Call Observable With Delay</button>

      <alert *ngIf="isAlertVisible()" type="success" dismissible="true" (onClose)="onAlertClose()">
          Async action successful!
      </alert>
    </div>
  `,
})
export class AppComponent {
  name:string;
  private isCallComplete = false;
  isAlertVisible(): boolean {
    console.log("isAlertVisible() binding updating: ", this.isCallComplete);
    return this.isCallComplete;
  }
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

   onAlertClickedNoDelay() {
    this.isCallComplete = false;
    console.log("set isCallComplete = false");
    Observable.of("some data").subscribe(data => {
      this.isCallComplete = true;
      console.log("set isCallComplete = true");
    });
  }

   onAlertClickedDelay() {
    this.isCallComplete = false;
    console.log("set isCallComplete = false");
    Observable.of("some data").delay(0).subscribe(data => {
      this.isCallComplete = true;
      console.log("set isCallComplete = true");
    });
  }

  onAlertClose() {
    this.isCallComplete = false;
    console.log("set isCallComplete = false");
  }
}

没有 Observable.delay()，控制台打印:

set isCallComplete = false
set isCallComplete = true
isAlertVisible() binding updating: true
isAlertVisible() binding updating: true

使用 Observable.delay() 时，控制台正确打印:

set isCallComplete = false
isAlertVisible() binding updating: false
isAlertVisible() binding updating: false
set isCallComplete = true
isAlertVisible() binding updating: true
isAlertVisible() binding updating: true

1) 为什么 Angular 在使用 Observable.delay(0).subscribe() 而不是 Observable.subscribe() 时检测初始属性绑定(bind) (isCallComplete = false)？

2)在 Observable.subscribe() 调用之前绑定(bind)到繁忙属性值的最佳解决方案是什么？

Answer 1

因为 Angular 永远没有机会检查 isCallComplete 的值。

您的 Observable 的订阅回调在创建后立即执行。

使用delay(0)相当于使用setTimeout(()=>/*...*/,0)，从而延迟执行当前同步代码执行后的订阅回调(在本例中，Angular 检查组件的值)