eckig 4 ​​* ngFür zusätzliche Zyklen unnötig?

Question

Was ist los mit diesem Plünderer, beginnt die Zählung bei 5?

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

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

Answer 1

Es ist, weil wie Änderungserkennung in eckigen arbeitet. Vor allem in der Entwicklung läuft jede Änderungserkennung zweimal.

Um dies zu ändern:

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

Dann wird Ihr Code wie erwartet Änderung changedetectionstrategy zu OnPush

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

Plunkr mit der Lösung zu machen: Plunkr

Answer 2

versuchen, diese Zeile zu ändern:

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

Wie so:

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

diese Weise werden Sie immer die Nummer des Elements in dem Array erhalten, verbessern Lesbarkeit und sogar einige Zeilen Code speichern.

Answer 3

Ihr Code funktioniert nicht gut, da {{ inc() }} in Ihrer Vorlage jedes Mal aufgerufen wird, wenn ein Änderungserkennungszyklus ausgelöst wird. I.e. Es wird öfter aufgerufen, als es Elemente in Ihrem Feld jokes gibt.

Stattdessen sollten Sie sich auf die von Angular zur Verfügung gestellte Variable index verlassen (wie von anderen Befragten vorgeschlagen).

Hier ist der Link zur offiziellen Dokumentation auf ngFor directive.

Lesen Sie auch über change detection in Angular, wenn Sie wirklich möchten wissen, warum Ihr ursprünglicher Code nicht wie erwartet funktioniert hat.