如何显示名称但从 mat-autocomplete select 的对象中获取某些其他属性的值？ 角-角材料

Question

我花了很多时间解决这个问题，但失败了。 我想选择显示名称并获取ID。 问题是，只要选择了一个值，就会显示该值的编号 (id)。 我的代码：

          <mat-form-field class="example-full-width">
            <input
            matInput
            placeholder="Search your product"
            formControlName="id"
            [matAutocomplete] = "auto">
            <mat-autocomplete #auto="matAutocomplete" > 
                  <mat-option    *ngFor="let option of allProducts; let i = index"   [value]="option.id"   >
                {{ option.name }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>

我试图创建一个函数 (onSelectionChange) 但无法显示名称并将值作为 (id)

Answer 1

好吧，您必须使用名为displayWith的自动完成输入功能。

您可以在此链接中找到问题的解决方案

另外，我为您制作了一个 stackblitz 示例，以进一步简化它。

例子

描述解决方案：

您必须向自动完成组件添加一个名为 displayWith 的输入

<mat-autocomplete #auto="matAutocomplete" [displayWith]="checkValue">

然后在您的组件中，您必须创建函数 checkValue

checkValue(value: any) {
// here you can get your id or whatever you want
console.log(value)
}  

然后您必须将值添加到您的垫子选项中，并将您的整个对象作为值

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

请查看 stackblitz 示例以获取更多详细信息