Javascript Angular2反应形式下拉列表

我正在学习angular 2，有一个案例，我正在创建一个表单，它将是一个设备。与设备关联的字段之一是建筑。当用户编辑或添加新设备时，我希望向他们显示一个下拉列表，其中列出他们可以将设备分配到的建筑。设备详图组件如下所示：

  export class EquipmentDetailComponent implements OnInit {
  equipment: IEquipment;
  equipmentForm: FormGroup;
  buildingList: Ibuilding[];

  constructor(private EquipmentService: EquipmentService,
              private BuildingsService: BuildingsService) { }

  ngOnInit() {
    this.equipment = this.EquipmentService.getEquipmentDetail(1);
    this.buildingList = this.BuildingsService.getBuildingList();

    let id = new FormControl(this.equipment.id);
    let unit = new FormControl(this.equipment.unit);
    let active = new FormControl(this.equipment.active);
    let building = new FormControl(this.equipment.building.id);

    this.equipmentForm = new FormGroup({
      id: id,
      unit: unit,
      active: active,
      building: building
    })    
  }

  saveEquipment(formValues){
    console.log(formValues);
  }

  onSelect(id){
    this.equipment.building = this.BuildingsService.getBuildingDetail(id);
    console.log(this.equipment.building)
  }
}

<div class="col-md-2">
  <form [formGroup]="equipmentForm" (ngSubmit)="saveEquipment(equipmentForm.value)" autocomplete="off" novalidate>
    <div class="form-group">
      <label form="unit">Unit:</label>
      <input formControlName="unit" id="unit" type="text" class="form-control" placeholder="Unit...."/>
    </div>
    <div class="form-group">
      <label form="active">Active:</label>
      <input formControlName="active" id="active" type="checkbox" class="form-control"/>
    </div>
    <div class="form-group">
      <label form="building">Building:</label>
      <select class="form-control" formControlName="building" (change)="onSelect($event.target.value)">
        <option *ngFor="let building of buildingList" value={{building.id}}>
          {{building.buildingName}}
        </option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

设备详细信息html如下所示：

  export class EquipmentDetailComponent implements OnInit {
  equipment: IEquipment;
  equipmentForm: FormGroup;
  buildingList: Ibuilding[];

  constructor(private EquipmentService: EquipmentService,
              private BuildingsService: BuildingsService) { }

  ngOnInit() {
    this.equipment = this.EquipmentService.getEquipmentDetail(1);
    this.buildingList = this.BuildingsService.getBuildingList();

    let id = new FormControl(this.equipment.id);
    let unit = new FormControl(this.equipment.unit);
    let active = new FormControl(this.equipment.active);
    let building = new FormControl(this.equipment.building.id);

    this.equipmentForm = new FormGroup({
      id: id,
      unit: unit,
      active: active,
      building: building
    })    
  }

  saveEquipment(formValues){
    console.log(formValues);
  }

  onSelect(id){
    this.equipment.building = this.BuildingsService.getBuildingDetail(id);
    console.log(this.equipment.building)
  }
}

<div class="col-md-2">
  <form [formGroup]="equipmentForm" (ngSubmit)="saveEquipment(equipmentForm.value)" autocomplete="off" novalidate>
    <div class="form-group">
      <label form="unit">Unit:</label>
      <input formControlName="unit" id="unit" type="text" class="form-control" placeholder="Unit...."/>
    </div>
    <div class="form-group">
      <label form="active">Active:</label>
      <input formControlName="active" id="active" type="checkbox" class="form-control"/>
    </div>
    <div class="form-group">
      <label form="building">Building:</label>
      <select class="form-control" formControlName="building" (change)="onSelect($event.target.value)">
        <option *ngFor="let building of buildingList" value={{building.id}}>
          {{building.buildingName}}
        </option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

当我单击save按钮并查看与formcontrol关联的数据时，建筑不再是一个对象，它只是buildingId

Object {id: 1, unit: "Item 1", active: true, building: "2"}
   active: true
   building: "2"
   id: 1
   unit:"Item 1"
   __proto__: Object

---

如何使用建筑对象而不仅仅是建筑id设置主设备对象？

这是因为您使用

building.id

具有值属性，这就是为什么它在选项选择中分配

building.id

。您应该考虑将< <代码>值> />代码>属性绑定到<代码> ngValue/COD> >整个<代码>构建< /Cord>对象。

<select class="form-control" formControlName="building" (change)="onSelect($event.target.value)">
  <option *ngFor="let building of buildingList" [ngValue]="building">
    {{building.buildingName}}
  </option>
</select>

{{building.buildingName}