ngFor 中的 Angular 双向绑定(bind)

Question

在 Anguar 6 中，我有一个 ngFor，其中包含一个选择字段。该字段的 selected-value 应绑定(bind)到我在 ngFor 中使用的 SeatBookingModel 的 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>

Controller 部分:

export class SeatPlanComponent implements OnInit {

  constructor(private route: ActivatedRoute, private dataService: DataService) { 
  }

  seatsAlreadyTaken: Array<String>;

  seatsReserved: Array<SeatBookingModel>;

getCategories(seatNr: String) {
    let mock1 = new CategoryModel();
    mock1.Id = 1;
    mock1.Name = "Erwachsen";
    mock1.Price = 27.00;

    let mock2 = new CategoryModel();
    mock2.Id = 2;
    mock2.Name = "Student";
    mock2.Price = 22.00;
    return [mock1, mock2];
  }

座位预订模型:

export class SeatBookingModel {
    SeatNumber : String;
    Category: CategoryModel;
}

类别模型:

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

Answer 1

ngValue 指令应该用作属性绑定(bind)，它不是双向可绑定(bind)指令。

[(ngValue)]="bk.Category"

应该是

[ngValue]="bk.Category"