从 Angular 中的子组件更新一个父数组值

Question

我有一个 parent 组件，它在 ngFor 内生成一些子组件：

<app-test-child *ngFor="let size of model.sizes; let i = index" [model]="model" [lineNumber]="i">
</app-test-child>

模型包含一个尺寸数组：

export class TestModel {
  constructor(type: string) {
    this.type = type;
    this.sizes = new Array<number>();
  }

  type: string;
  sizes: Array<number>;
}

我想要做的是让每个子组件更新模型中的一个尺寸。子组件目前看起来像这样：

Item {{lineNumber + 1}}: 
<select #radSize="ngModel" [(ngModel)]="model.sizes[lineNumber]">
  <option *ngFor="let size of availableItems" [ngValue]="size" [selected]="size === model.sizes[lineNumber]">{{size}}
  </option>
</select>
<br>

...availableItems 是一个简单的数字数组。

Here's a demo of the code above.

问题： 如果我选择第一个项目，第二个项目也会更新并获得焦点。实际上，ng-reflect-model 值只更新第一项，而不是第二项，所以这只是一个视觉问题，但对用户来说非常混乱。

有什么想法导致这种情况发生吗？

更新

似乎真正的问题是由于ngModel 被绑定到原始值这一事实。根据this answer 的说法，效果不太好。

解决方案是通过索引跟踪数组。我有updated my demo，效果很好！

具体来说，我在父组件中添加了如下方法：

  trackByIdx(index: number, obj: any): any {
    return index;
  }

然后更新我的模板如下：

<app-test-child *ngFor="let size of model.sizes; let i = index; trackBy:trackByIdx" [model]="model" [lineNumber]="i">
</app-test-child>

Answer 1

由于将引用传递给子组件导致了该问题。每个子组件都应该有一个新的测试模型实例以避免该问题。

仍然需要调查，因为它没有更新另一个孩子 成分。 我观察到当我更新第一个然后第三个 得到更新。

从不同的子组件更新父模型需要正确同步，并且有很多方法可以实现它而不是 ngModel。

这是链接，我更新了代码，更新第一个项目时第二个项目没有更新。在模型级别仍然需要很少的更改。最终问题是通过引用传递。

编辑器网址 - https://stackblitz.com/edit/angular-ivy-mecuia?file=src%2Fapp%2Ftest-parent.component.html