无法在 Angular 的 *ngFor 迭代器中声明对象

Question

我正在使用以下代码来迭代一堆自定义控件。因为那些需要知道一些东西，比如结构中的索引和位置，所以我传入一个配置对象来像这样把垃圾放在一起。

<div *ngFor="let thing of stuff; let first=first; let last=last; let index = index;">
  <app-thingy [data]="thing"
              [config]="{first:first,last:last,index:index}">
  </app-thingy>
</div>

我希望代码更紧凑，而且let this 和let that 似乎是一个非常重复的语法。所以我想我可以像这样在迭代标签中直接创建对象。

<div *ngFor="let thing of stuff; let config={first:first,last:last,index:index};">
  <app-thingy [data]="thing"
              [config]="config">
  </app-thingy>
</div>

但是，Angular 对此大喊大叫，声称 config 定义中的大括号是无效语法。

未捕获的错误：模板解析错误：
解析器错误：[let thing of stuff; 中的第 45 列出现意外的令牌 {、预期的标识符、关键字或字符串让 config={first:first,last:last,index:index};] in
...

]*ngFor="let thing of stuff; let config=

据我所知，语法是错误的但是我不明白为什么。有人可以解释一下为什么这两个样本不等价吗？

我注意到在 HTML 标记中使用 new MyType(...) 也不起作用，但这显然是设计使然。但是，这是一个匿名对象（类型为any）所以我有点疑惑。

【问题讨论】：

Answer 1

这是错误的

<div *ngFor="let thing of stuff; let config={first:first,last:last,index:index};">
  <app-thingy [data]="thing"
              [config]="config">
  </app-thingy>
</div>

因为 first:first,last:last,index:index 引用循环条件，所以它们不作为对象处理。您可以将其理解为 javascript 中的 for 循环，例如

for(let i=0; i<somelength ;i++){}

like i=0 等于 first:first 和 somelength 等于 last:last 和 i as index:index。它们不能像上面那样通过。

Answer 2

您不能在 component.html 中使用 let 声明对象

错误

<div *ngFor="let thing of stuff; let config={first:first,last:last,index:index};">

相反，您可以在 ts 中创建对象并在 HTML 中传递它