Angular 5 - 动态行添加清除表中的选择

【问题标题】：Angular 5 - Dynamic Row Addition clears the selection in TableAngular 5 - 动态行添加清除表中的选择
【发布时间】：2018-05-11 15:04:07
【问题描述】：

我是 Angular 新手，我正在玩一些 Angular 功能。在探索双向绑定时，我创建了一个通过单击按钮添加动态行的表格。我观察到，在我添加新行的那一刻，其他行的选择被清除，经过一些试验和错误，我发现罪魁祸首是<form>，当我删除标签时它工作正常。我已将 FormModule 包含在 NGModule 导入中，但我仍然看到相同的行为。

谁能解释我如何在<form> 中使用表格而不会出现此错误。非常感谢您解释为什么会发生这种情况。

请在下面找到我创建的 Plunker

https://plnkr.co/edit/5YPn88pNOhVoPJA8kSBj?p=preview

谢谢。

【问题讨论】：

标签： javascript html angular angular4-forms angular5

【解决方案1】：

问题不在于form，而在于input names

name应该不一样，

您可以在loop 中添加index，然后将name="soc1" 更改为name="soc1{{i}}"

解决方案如下：

<tr *ngFor="let dat of arr; let i=index;">
    <td>
        <select name="soc1{{i}}" [(ngModel)]="dat.it">
            <option value="PP">PP</option>
            <option value="PQ">PQ</option>
          </select>
    </td>
    <td> <select name="soc2{{i}}{{i}}" [(ngModel)]="dat.bit">
            <option value="PP">PP</option>
            <option value="PQ">PQ</option>
          </select></td>
    <td><button name="Name" (click)="addRow()">Add</button></td>
</tr>

WORKING DEMO

【讨论】：

谢谢你。不过只有一个问题，为什么它在表单之外工作而在表单标签内却没有工作？为什么行为会有所不同？
在表单之外它并不关心输入名称他们都以不同的方式对待。