angular - 数据绑定在角度不起作用

Question

问题：删除第一行并添加第二行时，第一行的值被第二行的值替换。

我为我面临的问题创建了一个 plunker https://next.plnkr.co/edit/1FL8qmSgMsSQCGNT?open=lib%2Fapp.ts&preview

重现步骤：

1. 单击“选择一个”下拉菜单并选择“屏幕 1”选项。
2. 再次单击“选择一个”下拉菜单并选择“屏幕 2”选项。
3. 现在删除第一行（屏幕 1）。
4. 再次单击“选择一个”下拉菜单并选择“屏幕 3”选项。

第一行的值被第二行的值替换。

我不知道导致此问题的代码有什么问题。

标签： angularangular2-templateangular2-forms

Answer 1

您的主要问题是您已将 ngModel 用于选择元素。

因此，当您从选择元素中选择项目时，selectedIds[rowIndex] 项目中的值会发生变化。

我在第一个 div 中应用了次要代码重构，如下所示，它将对您有所帮助。

<div *ngFor="let id of selectedIds; let rowIndex = index">
    <select name="id_{{rowIndex}}" class="form-control" required >
        <option *ngFor="let screen of screens"
        [selected]="screen.screenId==id"
         [ngValue]="screen.screenId">{{screen.screenName}}
        </option>
    </select>
    <a class="pointer" (click)="removeScreen(rowIndex)">Delete</a>
</div>