Angular 2 *ngFor 只支持在内联模板中一次添加 10 个元素

Question

我想多次重复特定元素，所以我使用带有硬编码数组的*ngFor 指令，如[1,2,3,4,5,6,7,8,9,10]，效果非常好。我实现了我想做的事情。

代码

@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

但是，一旦我将数组大小增加到 10 以上，我就开始出现错误。这真的很烦人。

zone.js@0.6.25?main=browser:355 未处理的承诺拒绝： 纯函数不支持的参数数量：11；区域：; 任务：Promise.then ;值：错误：不支持的参数数量 纯函数：11（...）错误：纯的参数数量不受支持 功能：11

模板

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

我很想知道为什么一旦数组大小增加超过 10 就会发生该错误？但另一个有趣的事情是，当我将相同的数组放入变量 items= [1,2,3,4,5,6,7,8,9,10,11] 的组件中并在 *ngFor 中使用 items 时，它就成功了。

这种特殊情况背后有什么原因吗？如果我遗漏了一些简单/愚蠢的东西，请原谅我。

Problem Plunkr

Answer 1

这只是 Angular2 模板解析器的一个限制，以避免解析器的复杂性（通过设计）。无论如何，将数据保存在组件实例中通常是个好主意。

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