使用选择选项的角度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>