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
})

see here

您看到此错误的原因是因为您的方法 returns 每次更改检测都会引用一个新的 Generator 对象。

另一种方法是仅当您的组件发生变化需要生成器更新时才设置生成器。您可以为此使用 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;
    }
  }
}

example with ngDoCheck

_{我确实想知道，您将 iterator/generator 用于什么用例？}

Angular 遍历迭代器

Angular Looping Over Iterator

iterator

yield

typescript

angular