数据绑定不能按角度工作

Question

问题：在删除第一行并添加第二行的同时，将第一行的值替换为第二行的值。

我为遇到的问题https://next.plnkr.co/edit/1FL8qmSgMsSQCGNT?open=lib%2Fapp.ts&preview

创建了一个小插曲

复制步骤：

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

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

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

Answer 1

您的主要问题是，已将ngModel用于select元素。

因此，当您此时从select元素中选择项目时，selectedIds [rowIndex]项目中的值就会更改。

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

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

Answer 2

很晚了，但问题是 Metronic 模板中存在的这段代码： changeDetection: ChangeDetectionStrategy.OnPush, 并且您应该注释这行代码以启用数据绑定。