ngModel 未绑定在 ngFor 选择标记内的选项上

Question

<form>
 <table>
        <tr *ngFor="let p of ArrayObject">
          <td>
            <div>
             <select class="form-control input-sm" [(ngModel)]="p.tag" 
name="tag" #required>
               <option ngValue="YES">YES</option>
               <option ngValue="NO" >NO</option>
             </select>
           </div>
         </td>
        </tr>
      </table>
</form>

我使用 ngFor 在表单内设置多选标签，它无需表单标签即可工作，但在表单标签内部似乎未正确设置值。

Answer 1

需要将方括号添加到 ngValue 以将其标识为绑定目标属性。它应该看起来像这样，而不是[ngValue]

<form>
  <table>
    <tr *ngFor="let p of ArrayObject; let index = index; trackBy:trackByIndex;">
      <td>
        <div>
          <select class="form-control input-sm" [(ngModel)]="p.tag[index]" name="tag{{index}}" #required>
            <option [ngValue]="YES">YES</option>
            <option [ngValue]="NO">NO</option>
          </select>
        </div>
      </td>
    </tr>
  </table>
</form>

在 component.ts 上，您需要定义 trackByIndex 方法：

// initialise with the following values to test if it is working
p = {
  tag: ['YES', 'YES', 'NO'] 
};
trackByIndex(index: number, obj: any) {
  return index;
}