typescript - Angular 2: Aplikacija se zamrzava kada se model promijeni s odabranog unosa

U aplikaciji Angular 2 koju pišem, imam select element koji je vezan za polje u kontroleru putem [(ngModel)]:

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

dateInfo je svojstvo u kontroleru koje se odnosi na DateInfo objekt sadržan u servisu pod nazivom DateService:

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

Sami objekt DateInfo je jednostavan Typescript sučelje koje samo pohranjuje godinu:

export interface DateInfo {
  year: number
}

Razlog zbog kojeg koristim ovaj sučelje je propagacija promjena u year na sve komponente koje koriste DateService, prema prvom odgovoru na ovo pitanje.

Iz nekog razloga, kada se model promijeni iz elementa select, cijela aplikacija se zamrzne (testirano u Chromeu i Edgeu). Napravio sam plunker da ilustriram problem ovdje.

Unaprijed hvala!

Odgovor #1

Problem uzrokuje getYearList() jer vraća novu instancu niza pri svakom pozivu. Svaki put kad Angularova detekcija promjena radi, detektira promjenu jer svaki put dobiva novi niz. Pitam se zašto niste dobili "izraz se promijenio od posljednje provjere"

Predmemoriranje rezultata rješava problem http://plnkr.co/edit/UKA35jIa9v6jFfrbJJuz?p=preview

Zbog toga je obično loša praksa pozivati metode iz predloška. Umjesto toga, dodijelite rezultat poziva metode svojstvu i vežite se na to svojstvo.