Angular2反応型ドロップダウン

Question

私は角度2を学習しており、私は機材になるフォームを作成しています。機器に関連付けられているフィールドの1つは建物です。ユーザーが新しい機器を編集または追加しているときに、機器を割り当てることができる建物のリストがドロップダウンで表示されます。次のように機器-詳細コンポーネントは次のとおりです。

<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> 

私は私が選択された建物を表すオブジェクトを取得し、ドロップダウンオプションをクリックすると次のように

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) 
    } 
} 

機器・ディテール・HTMLがあります。私は、保存ボタンをクリックして、建物は、もはやそれだけでbuildingIdであるオブジェクトですformcontrolに関連付けられているデータを見てみると、結果は

Object {id: 2, buildingName: "Building 2", active: true} 
    active: true 
    buildingName: "Building 2" 
    id: 2 

です。

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

建物のIDだけでなく、建物のオブジェクトで設定する主設備オブジェクトを取得するにはどうすればよいですか？

Answer 1

building.idという値属性を持っているからです。そのため、オプション選択にbuilding.idを割り当てているのです。 value属性バインディングをngValueに変更することを検討してください。buildingオブジェクトがあります。

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