angular 6 select 下拉列表中的数据绑定问题

Question

我正在尝试从用户那里获取一些数据。我的问题是，当我尝试更改第二个下拉列表中的值时，它也在更改所有其他行中的值，这是我没有预料到的。可以说我的观点如下所示，所有第二个下拉值都设置为 'c'。

当我更改第二个下拉列表中的任何值时，它会在所有下拉列表中更改，如下所示

请查看此 link 以便更好地理解。 https://stackblitz.com/edit/angular-a27qru?file=src%2Fapp%2Fapp.component.ts.

如果您能提供更新的 stackblitz link 和修复将不胜感激:)

编辑

我不想更改数据结构，这意味着 rowData 包含合作伙伴，而合作伙伴在其中包含组。我的条件是，默认情况下，它应该 select 'custom group' 作为第一个下拉列表的值，并且一些特定值（可以说 'c'）来自组的 'custom group' 合作伙伴的值。

Answer 1

在您的 .html 文件中，替换：

<select [(ngModel)]="data.partner.group" class='form-control'>
    <option *ngFor="let option of group" 
    [ngValue]="option">{{option.name}}</option>
</select>

作者：

<select [(ngModel)]="data.group" class='form-control'>
    <option *ngFor="let option2 of group" 
    [ngValue]="option2">{{option2.name}}</option>
</select>

Answer 2

link 到更新的 stackblitz：answer

Answer 3

通过将数据绑定更改为单向绑定而不是 html

中的双向绑定来修复此问题

参见下文 link 以获取修复参考。

https://stackblitz.com/edit/angular-siktgn?file=src/app/app.component.html

angular 6 select 下拉列表中的数据绑定问题

Data binding issue in angular 6 select dropdowns

2-way-object-databinding

angular

angular6