带有对象的角度选择发射选项答案

【问题标题】：Angular select emit option with object带有对象的角度选择发射选项
【发布时间】：2020-05-13 01:42:02
【问题描述】：

在我的 Angular 应用程序中，我有一个 <select> 和一个 <option>s 列表，其值绑定到对象。

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

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

onSelect(event: Event) {
  console.log(event);
}

所以我的选项绑定到对象（myOptions 是一个对象数组）。

这工作正常，{{ option.name }}（即字符串）正确显示。

问题是我的onSelect 中的event.target.value 将是一个类似"1: Object"、"2: Object" 等的字符串...

如果我使用[value] 而不是[ngValue]，问题会略有不同，这次event.target.value 将是"[object Object]" 字符串。

在发出(change) 事件时，如何获取真正的选定对象option？

【问题讨论】：

stackblitz 上的最小复制？
顺便问一下，这是您需要的唯一信息还是更大表单的一部分？

标签： angular typescript

【解决方案1】：

尝试使用下面的代码

在 html 中使用 ngModelChange 而不是更改事件

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

在ts中

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

谢谢

【讨论】：

@FrancescoBorzi 我收到了来自stackoverflow.com/questions/44840735/… 和stackoverflow.com/questions/45136548/… 的答案，链接将为您提供更多帮助

【解决方案2】：

我认为你不能为一个对象赋值，它应该是一个字符串值。看看这个帖子Can the select option value be of different types?。

一种选择是使用数组的索引，

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

或者，如果您的选项中有 id，

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

您有多种选择。

【讨论】：