如何在更改 select 选项时获取对象值 - Angular 9

Question

如何在更改 select 选项时获取对象值

items = [
{
  name:"Same",
  age:14,
  address:"Thailand"
},
{
  name:"Peter",
  age:30,
  address:"Thailand"
}
]

<select class="custom-select" (change)="selectItem($event.target.value)">
    <option *ngFor="let item of items" value="{{item}}" >
       {{item.name}}
    </option>
</select>

我可以使用 selectItem 和

获取对象值吗

interface Person {
    name: string;
    age: number;
    address: string;
}

public selectItem(data: Person) {
    console.log('==> data:', data);
    this.name = data.name;
    this.age = data.age;
    this.address = data.address
  }

但是我的 console.log 是 page: [object Object] 我希望它 page: {name:"Same" ,age:14 ,address:"Thailand"} 有时像那样

Answer 1

您需要在 <option> 元素上使用 [ngValue]。当您使用 [value] 它绑定到元素值属性时，它是一个字符串，[ngValue] 允许您绑定一个对象。

您还需要添加绑定模型 [ngModel]，然后绑定到 (ngModelChange) 事件而不是 (change)。有关工作示例，请参见下面的 stackblitz...

<select class="custom-select" #sel [ngModel]="sel" (ngModelChange)="selectItem($event)">
    <option *ngFor="let item of items" [ngValue]="item" >
       {{item.name}}
    </option>
</select>

https://stackblitz.com/edit/angular-ivy-bmnkl1

https://trungk18.com/experience/angular-select-option-value-ngvalue/

Answer 2

按如下方式使用：

app.component.ts

  public selectItem(data: any) {
    data = JSON.parse(data);
    console.log("==> data:", data);
    this.name = data.name;
    this.age = data.age;
    this.address = data.address;
  }

  stringify(val: any) {
    return JSON.stringify(val);
  }

app.component.html

<select #sel class="custom-select" (change)="selectItem(sel.value)">
    <option *ngFor="let item of items" value="{{stringify(item)}}" >
       {{item.name}}
    </option>
</select>

工作示例：https://stackblitz.com/edit/angular-ivy-cq8upg?file=src/app/app.component.html

如何在更改 select 选项时获取对象值 - Angular 9

How to get object value when changed select option - Angular9

html

javascript

ngfor

angular