角度 6 选择下拉菜单中的数据绑定问题答案

【问题标题】：Data binding issue in angular 6 select dropdowns角度 6 选择下拉菜单中的数据绑定问题
【发布时间】：2019-01-22 08:11:26
【问题描述】：

我正在尝试从用户那里获取一些用户数据。我的问题是，当我尝试在第二个下拉列表中更改值时，它也在更改所有其他行中的值，这是我不希望的。假设我的视图如下所示，所有第二个下拉值都设置为“c”。

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

请查看此链接以获得更好的理解。 https://stackblitz.com/edit/angular-a27qru?file=src%2Fapp%2Fapp.component.ts.

如果您能提供带有修复的更新的 stackblitz 链接将不胜感激 :)

编辑

我不想更改数据结构，这意味着 rowData 包含合作伙伴，合作伙伴包含其中的组。我的条件是，默认情况下，它应该选择“自定义组”作为第一个下拉列表的值，并从组中选择一些特定值（比如说“c”）作为合作伙伴的“自定义组”值。

【问题讨论】：

你为什么在select中使用compareWith？
我在玩不同的东西，但我没有调用那个方法。
您的代码中的问题是，您在所有合作伙伴中使用相同的对象。这就是为什么每当您从下拉列表中更新任何值时，该对象都会得到更新，并且由于所有其他原始数据都使用相同的对象，它们也会得到更新。尝试使用 Object.assign 或 Object.create
感谢@shhdharmen 的评论，我之前尝试过，但也没有运气，反正我已经修好了，你可以检查我的答案。

标签： angular angular6 2-way-object-databinding

【解决方案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>

【讨论】：

【解决方案2】：

更新的 stackblitz 链接：answer

【讨论】：

【解决方案3】：

通过将数据绑定更改为单向绑定而不是 html 中的双向绑定来修复它

请参阅下面的链接以获取修复参考。

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

【讨论】：