Angular Material 自动完成使用对象属性作为值答案

【问题标题】：Angular Material autocomplete use object attribute as valueAngular Material 自动完成使用对象属性作为值
【发布时间】：2020-10-08 08:54:06
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

问题是你在这里绑定了错误的值-> [value]="option.id"

解决方案

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

在您的 filteredOptions 中没有任何 id 参数，这就是它不起作用的原因所以，

将[value]="option.id" 更改为[value]="option"

一切都会好起来的！检查更新的代码

【讨论】：