Question

（我还没能在StackOverflow上找到类似的问题，如果我错过任何内容请链接我）我有一个ngfor循环循环记录列表。每个记录在选择列表中有多个动作（编辑，删除等）。我希望能够选择仅适用于记录的操作。

<tr *ngFor="let rec of records">

    <td><a href=""> {{rec.name}} </a></td>
    <td>{{rec.description}}</td>
    <td><a href=""> {{rec.date}} </a></td>
    <td>
        <select [(ngModel)]="selected" (change)="changeOption(rec);">
            <option selected disabled>Actions</option>
            <option value="editRec">Edit Record</option>
            <option value="deleteRec">Delete Record</option>
            ...more options
        </select>
    </td>
</tr>

changeOption现在只是简单地打印出this.selected，但是每当更改ngModel时，屏幕显示所有记录的选择值都会改变（因此只要选择了某些内容，它们就会显示编辑/删除/等等）。

这在组件文件中没问题，因为我仍然知道选择了哪条记录和哪个动作，但是UI方式看起来很奇怪。我认为这是预期的行为，因为每个选择值都绑定到此ngModel，但我想知道它是否可以单独绑定？

Answer 1

这种情况正在发生，因为您在[(ngModel)] *ngFor内使用了原始变量..所以每个 bind 都会引用相同的变量（在这种情况下{{1} }}）。要解决此问题，您可以将ngModel更改为selected：

rec.selected

PLUNKER

如何绑定ngmodel以在ngfor中选择选项

1 个答案: