Angular2通知模板更改答案

【问题标题】：Angular2 Notifying the template of a changeAngular2通知模板更改
【发布时间】：2016-06-02 16:35:07
【问题描述】：

这是我的代码：

@Component({
    selector: "foo",
    template: `
      <span>Init : {{o.init}}</span>
      <span>Loaded data : {{o.loadedData}}</span>
    `,
    providers: [
        Services
    ]
})
export class FooComponent implements OnInit{
   constructor (private _services: Services) {}

   o: Object
   ngOnInit() {
      o = {"init": "foo"}
      this.services.randomCall()
          .subscribe(
              res => this.o["loadedData"] = res["loadedData"]  
          )
   }
}

所以o.loadedData 不会每次都出现，因为我的randomCall() 和模板渲染之间存在竞争条件。我想在分配o["loadedData"] = res["loadedData"] 后通知角度。在 angular1 中，我会调用作用域的 digest() 函数。

如何在 angular2 中做类似的事情？

谢谢！

编辑：我补充了这个，这是一个错字。

【问题讨论】：

标签： angular

【解决方案1】：

我会使用this 关键字：

o: Object
ngOnInit() {
  this.o = {"init": "foo"}; // <-----

  this.services.randomCall()
      .subscribe(
          res => {
            this.o["loadedData"] = res["loadedData"]; // <-----
          }
      );
 }

编辑

您可以强制 Angular2 使用 ChangeDetectorRef 类检测更改，这样：

constructor(private cdr:ChangeDetectorRef) {
}

o: Object
ngOnInit() {
  this.o = {"init": "foo"};

  this.services.randomCall()
      .subscribe(
          res => {
            this.o["loadedData"] = res["loadedData"];
            this.cdr.detectChanges(); // <-----
          }
      );
 }

【讨论】：

我的错，这是我的 stackoverflow 案例中的一个错字，而不是我的实际案例。
好的没问题！您可以利用ChangeDetectorRef 类及其detectChanges 方法。通常不需要...
randomCall方法的内容是什么？

【解决方案2】：

通常这是由 Angulars 更改检测完成的，该更改检测由其区域通知应该发生更改检测。当以某种方式在 Angulars 区域之外运行的代码修改了您的模型时，您可以手动调用更改检测，例如

export class FooComponent implements OnInit{
   constructor (private _services: Services, private cdRef:ChangeDetectorRef) {}

   o: Object
   ngOnInit() {
      o = {"init": "foo"}
      this.services.randomCall()
          .subscribe(
              res => {
                  o["loadedData"] = res["loadedData"];
                  this.cdRef.detectChanges();
              });
          )
   }
}

由于 Thierry 提到的 this 缺失，在这种情况下手动更改检测无论如何都帮不了您。

有关如何调用更改检测的更多选项，请参阅Triggering Angular2 change detection manually

【讨论】：