Angular 2: Anwendung Einfrierens, wenn Modell aus Wähleingang

Question

in einem Winkel 2 Anwendung Ich schreibe geändert wird, habe ich ein select Element, das auf ein Feld in der Steuerung über [(ngModel)] gebunden ist:

<select [(ngModel)]="dateInfo.year" class="form-control"> 
    <option *ngFor="let year of getYearList()" [value]="year">{{year}}</option> 
</select> 

dateInfo ist eine Eigenschaft, in der Steuereinheit, die in einem Dienst enthalten ist, zu einem DateInfo Objekt bezieht genannt DateService:

@Injectable() 
export class DateService { 
    public dateInfo: DateInfo = { 
    year: 2016 
    } 
} 

DateInfo Das Objekt selbst ist ein einfaches Maschinenschrift Schnittstelle t Hut speichert nur das Jahr:

export interface DateInfo { 
    year: number 
} 

Der Grund, warum ich diese Schnittstelle verwende ist Änderungen year auf alle Komponenten zu propagieren, die DateService verwenden, da pro the first answer to this question.

Aus irgendeinem Grund, wenn das Modell aus dem select Element geändert wird, friert die gesamte Anwendung ein (in Chrome und Edge getestet). Ich habe einen Plünderer gemacht, um das Problem zu veranschaulichen here.

Vielen Dank im Voraus!

Answer 1

Das Problem wird durch getYearList() verursacht, die für jeden Aufruf eine neue Array-Instanz zurückgibt. Jedes Mal, wenn Angulars die Erkennung ändert, erkennt es eine Änderung, weil es jedes Mal ein neues Array erhält. Ich frage mich, warum Sie nicht ein „Ausdruck geändert hat, seit es zuletzt dachte geprüft“ erhalten hat

das Ergebnis korrigiert diese Fehler, warum es in der Regel schlechte Praxis Methoden aufrufen aus der Vorlage Caching der Ausgabe http://plnkr.co/edit/UKA35jIa9v6jFfrbJJuz?p=preview

. Weisen Sie stattdessen das Ergebnis eines Methodenaufrufs einer Eigenschaft zu und binden Sie stattdessen an diese Eigenschaft.