Angular 2使用选择选项保留选定对象的值[重复]

Posted 2023-03-05

【中文标题】Angular 2使用选择选项保留选定对象的值[重复]

【英文标题】：Angular 2 using select option preserve values of object selected [duplicate]

【发布时间】：2016-08-16 12:48:31

【问题描述】：

每个植物都有一个植物 ID、植物名称、角色。我试图从选项选择中取回整个对象。

   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]"。我将编写一个服务来从另一个中获取一个值，但我觉得应该有一种更清洁的方法来做到这一点。

【参考方案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>

【参考方案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>

希望对您有所帮助。