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

发布时间：2020-12-17 07:11:15 所属栏目：安全来源：网络整理

导读：我想在几个时间内重复特定元素,所以我使用* ngFor指令和[1,2,3,4,5,6,7,8,9,10]这样的硬编码数组,并且工作得很棒.我实现了我想做的事情. 码 @Component({ selector: 'my-app',template: `h1My First Angular App/h1 div *ngFor="let item of [1,10]" {{item}

我想在几个时间内重复特定元素,所以我使用* 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,10]">
          {{item}}: My Element 
      </div>`
})

Demo Plunkr

但是一旦我将数组大小增加到10以上,我就开始低于错误.哪个真烦人.

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

模板

<div *ngFor="let item of [1,10,11]">
  {{item}}
</div>`

我很想知道为什么一旦数组大小增加超过10就会发生错误？但另一个有趣的事情是当我在变量items = [1,11]中的组件中放入相同的数组并在* ngFor中使用了项目并且它得到了工作.

这种特殊情况背后有什么理由吗？如果我错过了一些简单/愚蠢的东西,我就是我.

Problem Plunkr

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!