Javascript 角度5-动态行添加清除表中的选择

我是新的角度，我正在玩一些角度的特点。 在探索双向绑定时，我创建了一个表，只需单击一个按钮即可动态添加行。 我注意到，在我添加新行的那一刻，其他行的选择就被清除了。经过一些尝试和错误，我发现罪魁祸首是

，当我删除标记时，它工作正常。我已经将

FormModule

包含到NGModule导入中，我仍然看到相同的行为

有人能解释一下在没有这个错误的情况下如何使用

中的表吗。对为什么会发生这种情况的解释也很受欢迎

请在下面找到我创建的Plunker

---

谢谢。

问题不在于

表单

，而在于

输入名称

名称

应不同

您可以做的是在

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>

聚丙烯
PQ
聚丙烯
PQ
添加

---

问题不在于

表单

，而在于

输入名称

名称

应不同

您可以做的是在

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>

聚丙烯
PQ
聚丙烯
PQ
添加

---

谢谢您的支持。不过，只有一个问题，为什么它在表单外工作，而在表单标签内不工作？为什么在行为上有差异？在表单外部，它不关心输入名称，它们都以不同的方式对待。谢谢你。不过，只有一个问题，为什么它在表单外部工作，而在表单标签内部不工作？为什么在行为上有差异？在形式之外，它不关心输入名称，它们都以不同的方式对待。