angular 4 *ngFor 额外的循环是不必要的吗？

Question

这个笨蛋怎么了，从 5 开始计数？

http://plnkr.co/edit/n0qIlzG8TN1GXjtoFA8y?p=preview

   <div *ngFor="let joke of jokes">
       <p>{{inc()}} - {{joke}}</p>
   </div>

Answer 1

尝试更改此行：

 <p>{{inc()}} - {{joke}}</p>

像这样：

<p>{{jokes.indexOf(joke)}} - {{joke}}</p>

这样你总能得到数组中项的编号，提高可读性，甚至可以节省一些代码行。

Answer 2

您的代码运行不佳，因为每次触发 变更检测周期 时都会调用模板中的 {{ inc() }}。 IE。它将被调用的次数超过 jokes 字段中的项目数。

相反，您应该依赖 Angular 提供的 index 变量（正如其他受访者所建议的那样）。

这是 ngFor directive 官方文档的 link。

此外，如果您真的想知道为什么您的原始代码没有按预期工作，请阅读change detection in Angular。

Answer 3

这是因为 angular 中的变化检测是如何工作的。首先，在开发过程中，每次更改检测都是运行两次。

要更改此设置：

import { enableProdMode } from '@angular/core';
enableProdMode()
platformBrowserDynamic().bootstrapModule(AppModule)

然后为了使您的代码按预期工作，将 changedetectionstrategy 更改为 OnPush

@Component({
selector: 'joke-list',
template: `
<div *ngFor="let joke of jokes">
<p>{{inc()}} - {{joke}}</p>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush
})

Plunkr 的解决方案：Plunkr

angular 4 *ngFor 额外的循环是不必要的吗？

angular 4 *ngFor extra cycles unnecessary?

ngfor

angular