如何綁定ngmodel來在ngfor中選擇選項

（我在StackOverflow上找不到類似的問題，如果我錯過了任何東西，請鏈接我）我有一個ngfor循環遍歷記錄列表。每個記錄在選擇列表中都有多個操作（編輯，刪除等）。我希望能夠選擇僅適用於記錄的操作。如何綁定ngmodel來在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改變時，屏幕顯示的所有記錄中選擇值被改變（所以他們都表現出編輯/刪除/等。只要是東西選擇）。

這是在組件文件就OK了，因爲我還知道選擇哪些記錄和行動，但UI明智它看起來很奇怪。我認爲這是正常現象，因爲每一個選擇值被綁定到該ngModel，但我想知道是否有可能單獨綁定？

來源

2017-06-09 Quan Huynh

，它的發生是因爲您使用的是原始變量在[(ngModel)]內*ngFor ..所以每綁定將引用相同的變量（在這種情況下selected）。爲了解決這個問題，你可以改變ngModel到rec.selected：

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

PLUNKER

來源

2017-06-09 19:37:20 developer033

這是否綁定模型到組件的this.selected？如果不是它綁定到什麼？我試過這個，但是console.log（this.selected）不打印選擇的動作。 –

我上面爲什麼相關的多個項目的單一變量是行不通的解釋。你讀過它嗎？ – developer033

我做了，但我不清楚你的意思。我想我現在謝謝 –

如何綁定ngmodel來在ngfor中選擇選項

回答

相關問題