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。所以我想我可以在迭代标签中直接创建对象。

<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栏中的意外标记{，期望标识符，关键字或字符串; let config = {first：first，last：last，index：index};] in   ...
  ＆lt; div [ERROR - ＆gt;] * ngFor =“让东西的东西;让config =

到目前为止，我可以使用goolearch，语法错误但是我看不出原因。有人可以说明为什么这两个样本不相同？

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

Answer 1

您无法在component.html

中使用let声明对象

<强> WRONG

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

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

Answer 2

这是错误的

<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(let i=0; i<somelength ;i++){}

类i=0等于first:first，某些长度等于last:last和i as index:index。他们不能像上面那样被传递。

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

2 个答案: