使用* ngFor Angular + 2保持更新数据

Question

我有breaking-news.component.ts并且在其中我正在阅读返回突发新闻的API，我正在使用以下内容推送新闻：

this.data = this.data || [];

this.response.news.forEach(news => {
this.data.push(news);
});

breaking-news.component.html

 <div *ngFor="let news of data">
        <article class="hentry post">
            <mat-card>
                <mat-card-header>
...
...
...
  <p>{{news.text}}</p>
...
...
...
              </mat-card-actions>
            </mat-card>
        </article>
    </div>

使用*ngFor在我的页面中完美地显示了新闻，但问题是当API更新时，它会在我刷新页面后才会显示，因此data数组不会推送通过刷新页面再次调用API之前的新数据。

Answer 1

你的一些代码似乎在Angulars区域之外运行，这就是Android无法识别它需要运行变更检测的原因。

您可以在Angulars区域中明确地运行代码

constructor(private zone:NgZone) {}

foo() {
  this.zone.run(() => {
    this.data = this.data || [];

    this.response.news.forEach(news => {
      this.data.push(news);
    });
  });
}

但最好弄清楚（如果可能的话，修复）为什么你的代码首先在区域之外运行。