*ngFor 和 @for 输入装饰器和铸造闭包

Question

我使用 *ngFor 指令和新的 @for 块实现了不同级别的关闭。我有一个使用 for 循环创建多个子组件的父组件：

        <app-active-problem class="panel" *ngFor="let activeProblem of summary.activeProblems" [activeProblem] = "activeProblem" (update)="updateActiveProblem($event);"></app-active-problem>
        <!--
        @for (activeProblem of summary.activeProblems; track $index) {
            <app-active-problem class="panel" [activeProblem] = "activeProblem" (update)="updateActiveProblem($event);"></app-active-problem>
        }-->
      </ng-container>

在子组件中，我接受 [activeProblem] 输入作为 ProblemGroup |叙述问题类。为了有效区分两者并渲染视图。我创建了两个实例变量

  problemGroup?: ProblemGroup;
  narrativeProblem?: NarrativeProblem;

  ngOnInit(): void {
    if (this.activeProblem instanceof ProblemGroup) {
      this.problemGroup = this.activeProblem as ProblemGroup;
    } else {
      this.narrativeProblem = this.activeProblem;
    }
  }

在同一个视图中，我有一个单击事件处理程序，可以切换问题组下的值（本质上是改变对象）。

            <input
              clrCheckbox
              type="checkbox"
              [checked]="p.value"
              (change)="toggle($event, $index)"
            />

如果我在将 activeProblem 分配给 ProblemGroup 时使用 @for 渲染子组件，它会丢失它的引用，从而有效地创建对象的副本。因此，我在子组件中所做的任何突变都不会反映在原始对象中。

如果我使用 *ngFor 指令渲染子组件，那么它会按预期工作，我对 ProblemGroup 所做的任何突变都有效地指向 activeProblem。

我希望我能弄清楚为什么会发生这种情况？

Answer 1

我想在

*ngFor

中你之前没有使用过

trackBy

功能，对吗？在 Angular 17 中，当您使用

@for

时，必须设置

track

函数，该函数与旧 Angular 版本中的

trackBy

函数相同。在您的代码中，我看到您将其设置为

track $index

，这意味着 Angular 始终认为它仍然是相同的元素并且永远不会改变。要解决此问题，您应该将

track

函数更改为

track activeProblem.id

之类的内容。

例如：

 @for (activeProblem of summary.activeProblems; track activeProblem.id) {
      <app-active-problem class="panel" [activeProblem] = "activeProblem" (update)="updateActiveProblem($event);"></app-active-problem>
 }