从 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.

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

知道是什么原因导致的吗？

更新

看来真正的问题是由于 ngModel 被绑定到原始值。根据，这不是很好。

解决方案是通过索引跟踪数组。我已经 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

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

Still needs to investigate because it is not updating another child components. I observed like when I'm updating the first one then the third one's get updated.

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

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

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

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

Updating one parent array value from a child component in Angular

angular

typescript

ngfor

更新