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

Question

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

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

请在下面找到我创建的 Plunker

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

谢谢。

Answer 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

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

Angular 5 - Dynamic Row Addition clears the selection in Table

html

javascript

angular

angular4-forms

angular5