ngFor 调用函数 Angular2答案

【问题标题】：ngFor call function Angular2ngFor 调用函数 Angular2
【发布时间】：2016-09-06 15:14:55
【问题描述】：

以下作品：

*ngFor="let child of items || []; let i = index;"

这不是：

*ngFor="let child of items || []; let specialVersionOfI = someFunction(index);"

我明白了：

Parser Error: Unexpected token (, expected identifier, keyword, or string at column 56 in [ngFor let child of items |

这背后的原因是什么，是否有替代方案？

【问题讨论】：

【解决方案1】：

在组件中带有映射的版本更具可读性，例如：

this.items.map((child, i) => { child['specialVersionOfI'] = this.someFunction(i); return child; }) 然后在模板中 {{child.specialVersionOfI}}

【讨论】：

【解决方案2】：

稍后在循环中使用该函数，而不是在分配索引时。

<u>
   <li *ngFor="let item of items || []; let i=index">
      use function here >> {{someFunction(i)}}
   </li>
</u>

您还可以操作模型中的数组并将特殊索引存储在第二个并行数组中，然后在模板中访问它。

<u>
   <li *ngFor="let item of items || []; let i=index">
      access special index >> {{customIndices[i]}}
   </li>
</u>

【讨论】：

同意这个答案。 *ngFor 的工作方式是它是一种优于其他一些绑定的糖语法。当 Angular 编译运行时，它被编译成多个绑定。 ngFor 的语法没有很好的文档记录（至少我找不到关于当前解析工作方式的全面指南），所以最好让它尽可能简单，并按照@BeetleJuice 的建议在循环中添加自定义逻辑