angular - 无法分配给引用或变量! (与链接的情况不同)

Question

这个问题没有通过像this one 这样的答案来解决。尽管问题的措辞相似。

我正在使用一个自定义组件，并按预期进行以下工作。没有错误，没有警告。

<app-setter [(setting)]="records[0]"></app-setter>
<app-setter [(setting)]="records[1]"></app-setter>
<app-setter [(setting)]="records[2]"></app-setter>

当然，我更喜欢使用这样的模板生成器。

<app-setter *ngFor="let record of records;"
            [(setting)]="record"></app-setter>

这会产生以下错误。

Cannot assign to a reference or variable!

谷歌搜索导致对同一主题的大量点击 - 组件中的变量与生成的标签的 ID 之间存在冲突。据我所知，这里不是这种情况。我将组件中的唯一字段重命名为 records，但我什至没有看到任何 ID 分配给生成的标签。

问题的原因可能是什么？我该如何进一步诊断？我不确定如何了解发生这种情况的实际位置(它是 compiler.js:xxxx，它什么也没告诉我)。

编辑

我尝试了以下但没有成功。

<ng-container *ngFor="let record of records;">
  <app-setter [(setting)]="record"></app-setter>
</ng-container>

但是，我注意到从香蕉盒中取出香蕉会使错误消失(当然结果是双向绑定(bind)被破坏了。这有效:

<ng-container *ngFor="let record of records;">
  <app-setter [setting]="record"></app-setter>
</ng-container>

它告诉我的很少。但它说明了一些事情，对吧？

组件代码如下所示。

export class AssessmentComponent implements OnInit {
  constructor() { }
  records: Record[];
  ngOnInit() { this.records = [new Record("x", 3), new Record("y", 2)]; }
  onAddition(event: Record) { console.log(); }
}

Answer 1

您需要像这样使用 *ngFor 循环设置索引。

 <app-setter *ngFor="let record of records; let i = index"
                [(setting)]="records[i]">
 </app-setter>

就像我在其他解决方案的评论中提到的那样，Nikhil 关于使用 ng-container 的建议是很好的做法。虽然您没有在此处执行此操作，但如果您需要在同一元素上使用 *ngIf 和 *ngFor，请使用另一个答案中描述的 ng-container，它将产生所需的效果。