角材料自动完成-如何显示所选对象的指定属性

Question

我有一个简单的用例，其中遍历对象数组。

我想在输入字段中显示属性“ customName”，但也能够检索http调用的ID值。

<input clrInput [(ngModel)]="order.customer" name="customer [matAutocomplete]="customerAutoComplete"/>
<mat-autocomplete #customerAutoComplete="matAutocomplete" (optionSelected)="onSelectCustomer($event)">
    <mat-option *ngFor="let customer of customerList" [value]="customer">
        {{customer.customName}}
    </mat-option>
</mat-autocomplete>

将对象绑定到值时，可以使用optionSelected检索整个对象。但是输入将按预期显示[Object object]。

当我将customer.customName绑定到value时，我得到显示的字符串，但是无权访问对象id。

Answer 1

您可以使用displayWith

<input clrInput [(ngModel)]="order.customer" name="customer [matAutocomplete]="customerAutoComplete"/>
<mat-autocomplete #customerAutoComplete="matAutocomplete" (optionSelected)="onSelectCustomer($event)" [displayWith]="displayProperty">
    <mat-option *ngFor="let customer of customerList" [value]="customer">
        {{customer.customName}}
    </mat-option>
</mat-autocomplete>

在component.ts

中

public displayProperty(value) {
    if (value) {
      return value.customName;
    }
  }