时间戳

首页 > 解决方案 > Angular Material 自动完成使用对象属性作为值

angular - Angular Material 自动完成使用对象属性作为值

问题描述

我有一个要在自动完成中使用的对象列表。当一个选项被选中时，formControl 获取所选项的值。现在我不关心整个对象，我只关心 ID。我更改了选项以将 id 作为值，但随后 textinput 仍然为空。

  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.id">
    {{option.name}}
  </mat-option>

示例：https ://stackblitz.com/edit/angular-b97y6e-jwm2jq?file=src%2Fapp%2Fautocomplete-display-example.ts

有没有办法将对象属性用作值？

标签： angularangular-material

解决方案

这里的问题是 [value] 始终是字符串。请改用 [ngValue]。在这里您可以传递对象和数字（它们是 javascript 中的对象）等。

Angular 5 中 value 和 ngValue 的区别

<mat-option *ngFor="let option of filteredOptions | async" [ngvalue]="option.id">
    {{option.name}}
</mat-option>

推荐阅读