Angular 带对象的角度选择发射选项

在我的Angular应用程序中，我有一个

，其中有一个

列表，其值绑定到对象

我正在尝试使用以下方法获取最后选择的值：

<select (change)="onSelect($event)">
   <option *ngFor="let option of myOptions;" [ngValue]="option"> {{ option.name }} </option>
</select>

因此，我的选项绑定到对象（

myOptions

是一个对象数组）

这可以正常工作，并且正确显示了

{{option.name}

（这是一个字符串）

问题是my

onSelect

中的

事件.target.value

将是一个类似

“1:Object”

，

“2:Object”

等的字符串

如果我使用

[value]

而不是

[ngValue]

的话，问题会稍微不同，

事件.target.value

这次将是

“[object object]”

字符串

---

当发出

（更改）

事件时，如何获取真正选定的对象

选项

？

我认为您不能为对象赋值，它应该是字符串值。看看这篇文章

一个选项是使用数组的索引

<select (change)="onSelect($event)">
   <option *ngFor="let option of myOptions; index as i;" [value]="i"> {{ option.name }} </option>
</select>

{{option.name}

或者如果你选择了一个id

<select (change)="onSelect($event)">
   <option *ngFor="let option of myOptions" [value]="option.id"> {{ option.name }} </option>
</select>

{{option.name}

---

您有许多选项可供选择。

尝试使用以下代码

在html中，使用ngModelChange而不是change事件

<select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData"> {{currentData.name}}</option>
</select>

---

谢谢

stackblitz的最小复制？顺便问一下，这是您需要的唯一信息还是这是一个更大表单的一部分？@FrancescoBorzi我从中获得了ans，link将帮助您获得更多信息

<select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
      <option *ngFor="let currentData of allData" [ngValue]="currentData"> {{currentData.name}}</option>
</select>

allData = [{ name: "data1", id: 1 }, { name: "data2", id: 2 }];
dataChanged(event) {
    console.log(event); // here you will able to see whole object in console
  }