Angular 2 * ngFor obsługuje tylko dodawanie 10 elementów naraz w szablonie liniowym

Question

Chciałem powtórzyć dany element kilka razy, więc używam dyrektywy *ngFor z zakodowanymi tablicami, takimi jak [1,2,3,4,5,6,7,8,9,10], a to zadziałało świetnie. Osiągnąłem to, co chciałem.

Kod

@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular App</h1> 
     <div *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]"> 
      {{item}}: My Element 
     </div>` 
}) 

Demo Plunkr

Ale jak tylko zwiększył rozmiar tablicy więcej niż 10, to zaczną się poniżej błędu. Co jest naprawdę denerwujące.

zone.js@0.6.25?main=browser:355 Unhandled Promise rejection: Unsupported number of argument for pure functions: 11 ; Zone: ; Task: Promise.then ; Value: Error: Unsupported number of argument for pure functions: 11(…) Error: Unsupported number of argument for pure functions: 11

Szablon

<div *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11]"> 
    {{item}} 
</div>` 

Jestem ciekaw, dlaczego tak się dzieje błąd jak najszybciej tablicy wzrostem wielkości więcej niż 10? Kolejną interesującą rzeczą jest umieszczenie tej samej tablicy w komponencie wewnątrz zmiennej items= [1,2,3,4,5,6,7,8,9,10,11] i użycie items w *ngFor i to zadziałało.

Czy istnieje jakiś powód takiego specjalnego przypadku? Oprzyj mnie, jeśli przegapię coś prostego/głupiego.

Problem Plunkr

Answer 1

To tylko ograniczenie Angular2 szablonu parser, aby uniknąć złożoności parsera (wg projektu). Zazwyczaj dobrym pomysłem jest przechowywanie danych w instancji składnika.

https://github.com/angular/angular/blob/d972d8235458a6e65819f96ee56da059ec76321b/modules/%40angular/compiler/src/view_compiler/util.ts#L82