Angular ngFor中的角度双向绑定

在Anguar 6中，我有一个ngFor，其中包括一个select字段。此字段的所选值应绑定到我在ngFor中使用的SeathookingModel的Category属性。由于这是CategoryModel类型，我可以显示CategoryModel的.Price属性

我做错了什么？未设置类别的值。 模板：

 <form>
  <table class="table">
    <tbody *ngFor="let bk of seatsReserved; let in=index">
      <tr>
        <td>
          <span>{{ bk.SeatNumber }} </span>
        </td>
        <td>
           <select class="form-control" name="ddlCategory_{{in}}">
            <option *ngFor="let cat of getCategories(bk.SeatNumber)" [(ngValue)]="bk.Category" >{{cat.Name}}</option>
          </select>
        </td>
        <td>
         <span>{{ bk.Category.Price }}</span>
        </td>
      </tr>
    </tbody>
    </table>

类别模型：

export class CategoryModel {
    Id : Number;
    Name: String;
    Price: Number;
}

---

ngValue

指令应该用作

属性绑定

，而不是双向绑定指令

[(ngValue)]="bk.Category"

[ngValue]="bk.Category"

应该是

---

Ngvalue不支持双向绑定，您可以使用（onChange）=yourChangeFunction（）获取/更新您的值。

我们不能将

Ngvalue

指令作为双向绑定

在这里，您将其设置为双向，就像

[（）]

（框中的香蕉），此语法将值双向绑定。 对于指令，您应该执行单向

[]

（仅框）

---

因此，您的声明

[（ngValue）]=“bk.Category”

应该是

[ngValue]=“bk.Category”

您可以发布您绑定的数据吗？值不是选项的已知属性，您应该使用

[value]=“bk.Category.Name”

@Sajeetharan我已经添加了上面的getCategories（..）方法。我认为您需要这样的东西，请检查。@fatemefazli感谢stackblitz，但这只在没有ngFor的情况下有效。我需要这个来处理多行。我已将您的stackblitz升级为多行：

[(ngValue)]="bk.Category"

[ngValue]="bk.Category"

<select [(ngModel)]="selectedOption">
      <option *ngFor="let bk of selectOptions" [ngValue]="bk.Category.Name">
        {{bk.Category.Name}}
      </option>
</select>
{{ "selectedOption: " + selectedOption }}

// the option you selected; this is the model you bind to the select element.
// this also will hold the selected option/value when you change the select


public selectOptions:SeatBookingModel[] = [
   { SeatNumber : 'test1' , Category:{
     Id : 44,
     Name: 'test',
     Price: 4,
   }
  }
]; 

public selectedOption = "test";