Question

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

有人可以解释如何在没有此错误的情况下在FormModule内使用表格。为什么会发生这种情况的解释也非常受欢迎。

请在

下找到我创建的Plunker

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

谢谢。

Answer 1

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

name应该不同，

您可以做的是在index中添加loop，然后将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 - 动态行添加清除表中的选择

1 个答案: