Angular 循環遍歷迭代器

Question

我有一個帶有該方法的組件：

public *numGen(): Iterator<number> {
    for (let i = 0; i < 5; ++i)
      yield i;
  }

和 HTML 與：

<p *ngFor="let n of numGen()">{{n}}</p>

我希望這會產生：

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

它確實如此，但它也會產生一個錯誤：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'ngForOf: [object Generator]'. Current value: 'ngForOf: [object Generator]'.

任何人都知道如何防止產生錯誤？

Answer 1

一種方法是使用OnPush更改檢測策略。 這將確保它僅在組件內部的某些內容被@Input更改或從模板發出的事件時檢查綁定。 這本身就具有很大的性能改進，以及何時觸發更改檢測的更合乎邏輯的模式。

@Component({
  // ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

看這里

您看到此錯誤的原因是您的方法在每次更改檢測時都會返回一個新的Generator object 引用。

---

另一種方法是僅在組件發生需要更新生成器的更改時才設置生成器。 您可以為此使用ngDoCheck鈎子。 請注意，這會被調用很多次，盡管如果您使用OnPush策略則不會那么頻繁，無論如何我強烈建議您這樣做。

export class AppComponent  {
  generator: Iterable<number> = this.numGen();

  multiplier = 1;

  ngDoCheck(): void {
    this.generator = this.numGen();
  }

  times(): void {
    this.multiplier *= 2;
  }

  private *numGen(): Iterable<number> {
    for (let i = 0; i < 5; ++i) {     
      yield i * this.multiplier;
    }
  }
}

ngDoCheck 示例

_{我確實想知道，您使用迭代器/生成器的用例是什么？}