使用選擇選項的角度2保留所選對象的值

Question

每個植物都有一個plantid植物名稱角色。我試圖從選項選項中取回整個對象。

onChange(newValue){ 
     console.log(newValue) 
     this.selectedPlant = newValue 
    } 

<select 
    *ngIf="plants" 
    class="form-control" 
    style="width:auto;" 
    #sel 
    [(ngModel)]="selectedPlant" 
    (ngModelChange)="onChange($event)" 
    > 
    <option 
    *ngFor="#plant of plants" 
    [value]="plant.plantid" 
    >{{plant.plantname}}</option> 
</select> 

如果我設置[value] = "plant", I get "[Object, Object]"。我要寫一個服務來獲得另一個的價值，但我覺得應該有一個更乾淨的方式來做到這一點。

Answer 1

如果你想整個工廠對象，而不會改變太多的代碼，你可以做這個 -

onChange(plantid){ 
    console.log(plantid) 
    this.selectedPlant = this.plants.filter((plant)=>{ return plant.plantid=== plantid;}); 
} 

而在你的HTML -

<select *ngIf="plants" class="form-control" style="width:auto;" #sel (ngModel)]="selectedPlant" (ngModelChange)="onChange($event.target.value)"> 
<option *ngFor="#plant of plants" [value]="plant.plantid">{{plant.plantname}}</option> 

希望有所幫助。

Answer 2

如果你想使用對象的值，而不是簡單的字符串，你必須使用[ngValue]而不是[value]：

<select 
    *ngIf="plants" 
    class="form-control" 
    style="width:auto;" 
    #sel 
    [(ngModel)]="selectedPlant" 
    (ngModelChange)="onChange($event)"> 
    <option 
     *ngFor="let plant of plants" 
     [ngValue]="plant">{{plant.plantname}} 
    </option> 
</select>