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

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。

you can find the solution to your problem in this link here

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

Example

描述解决方案：

你必须在你的自动完成组件中添加一个名为 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 选项中，并将你的整个对象作为值赋予它

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

Please check the stackblitz example for more details