angular - 如何将 ngmodel 绑定(bind)到 ngfor 中的选择选项

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 Angular 来看，它看起来很奇怪。 我认为这是预期的行为，因为每个选择值都绑定(bind)到这个 ngModel，但我想知道是否可以单独绑定(bind)？

Answer 1

发生这种情况是因为您在 *ngFor 内的 [(ngModel)] 中使用了原始变量。所以每个绑定(bind)都会引用相同的变量(在本例中为selected)。要解决这个问题，您可以将 ngModel 更改为 rec.selected:

<select [(ngModel)]="rec.selected" (change)="changeOption(rec)">...

PLUNKER