Question

在角度我有一个选择元素，我在其中列出了如下所示的对象列表：

<select class="m-1" (change)="valueChanged($event.target.value)">
   <option *ngFor="let item of items" [value]="item">
      {{item.name}}
   </option>
</select>

这是相应的组件代码：

valueChanged(value: Item) {
    console.log('Selection Changed: ' + value.name);
}

但非常令人惊讶的是它记录为未定义，而如果仅记录value则会打印Selection Changed: "[object Object]"

如何在选择处理程序中获取当前所选对象？

Answer 1

我建议使用[(ngModel)]的双向绑定。您可以使用(ngModelChange)监控选择更改。要将对象用作选择选项，应使用[ngValue]设置值。

<强> HTML：

<select class="m-1" [(ngModel)]="selectedItem" (ngModelChange)="valueChanged($event)">
   <option *ngFor="let item of items" [ngValue]="item">
      {{item.name}}
   </option>
</select>

<强>代码：

selectedItem: Item;

valueChanged(value: Item) {
    console.log('Selection Changed', value);
}

使用(ngModelChange)无数据绑定

使用(ngModelChange)的事件绑定也可以在没有双向数据绑定的情况下使用，但必须将ngModel指令应用于元素才能使其正常工作：

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

Answer 2

您必须在$event函数中完全传递(change)对象，并从相应的方法中获取值。

valueChanged(value: any) {
        console.log('Selection Changed: ' + value);
}

Angular 5：如何从组件中侦听选定的选项？

2 个答案: