角度4 * ng對於額外的循環是不必要的？

Question

這個闖入者有什麼問題，計數從5開始？

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

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

Answer 1

這是因爲變化檢測如何在角度上起作用。首先，在開發過程中，每次變更檢測都會運行兩次。

要改變這一點：

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

Answer 2

嘗試改變這一行：

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

像這樣：

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

這樣，你總是會得到數組中的項目的數量，提高可讀性甚至保存一些代碼行。

Answer 3

您的代碼無法正常工作，因爲您的模板中的{{ inc() }}每次觸發變更檢測週期時都會被調用。即它將被調用的次數超過jokes字段中的項目。

相反，您應該依賴Angular提供的index變量（如其他受訪者建議的那樣）。

以下是關於ngFor directive官方文檔的鏈接。

另外，如果你想想知道爲什麼你原來的代碼沒有按照你的預期工作，請閱讀change detection in Angular。