Question

每株植物都有植物名称。我正试图从选项选择中取回整个对象。

   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

如果您想将对象用作值而不是普通字符串，则必须使用[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>

Answer 2

如果你想要整个工厂对象，而不需要改变很多代码，你可以这样做 -

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>

希望有所帮助。

Angular 2使用select选项保留所选对象的值

2 个答案: