如何解决迭代器上的角度循环
我的方法有一个组成部分:
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]'.
有人知道如何防止错误发生吗?
解决方法
一种方法是使用OnPush
更改检测策略。这样可以确保仅在组件内部的内容被@Input
更改或模板发出事件时才检查绑定。它本身具有很大的性能改进,并且在触发更改检测时更具逻辑性。
@Component({
// ...
changeDetection: ChangeDetectionStrategy.OnPush
})
看到此错误的原因是,您的方法在每次更改检测时都会返回一个新的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;
}
}
}
我确实想知道,您在使用哪种迭代器/生成器?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。