Góc 2 * ngFor chỉ hỗ trợ thêm 10 phần tử tại một thời điểm trong mẫu nội tuyến

Question

Tôi muốn lặp lại phần tử cụ thể trong một khoảng thời gian, vì vậy tôi đang sử dụng chỉ thị *ngFor với mảng được mã cứng như [1,2,3,4,5,6,7,8,9,10] và đã hoạt động tuyệt vời. Tôi đã đạt được những gì tôi muốn làm.

Mã

@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

Nhưng ngay sau khi tôi tăng kích thước mảng hơn 10, tôi bắt đầu nhận được dưới đây lỗi. Đó là thực sự gây phiền nhiễu.

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

Template

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

Tôi tò mò muốn biết lý do tại sao lỗi đang xảy ra càng sớm càng mảng tăng kích thước hơn 10? Nhưng một điều thú vị là khi tôi đặt cùng một mảng trong thành phần bên trong biến items= [1,2,3,4,5,6,7,8,9,10,11] và sử dụng items trong *ngFor và nó đã hoạt động.

Có lý do nào đằng sau trường hợp đặc biệt đó không? Xin lỗi tôi nếu tôi thiếu một cái gì đó đơn giản/ngớ ngẩn.

Problem Plunkr

Answer 1

Đây chỉ là một hạn chế của các Angular2 mẫu phân tích cú pháp để tránh phức tạp trong phân tích cú pháp (theo thiết kế). Nó thường là một ý tưởng tốt để giữ dữ liệu trong thể hiện thành phần anyway.

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