使用 Angular 自动完成存储对象，不仅是输入中的值

Question

在 Angular 上，我创建了一个带有 mat-autocomplete 和 mat-option 的输入（数据来自对象数组，使用 NgFor）。对象的属性是 ID、姓名和电子邮件。

自动完成有效，过滤器有效。用户可以 select 成功地从列表中筛选出一个项目，它会反映在输入值中。

项目列表对应Array中每个Object的ID列表。

<mat-form-field appearance="outline">
            <mat-label>Id</mat-label>
            <input matInput
                
                type="text"
                placeholder="Id"
                aria-label="Number"
                formControlName = "ID"
                [matAutocomplete]="auto">
    
            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                <mat-option *ngFor="let customer of filteredCustomers | async" [value]="customer.ID">
                    {{ customer.ID }}
                  </mat-option>
            </mat-autocomplete>
            </mat-form-field>

问题是：我可以存储输入值（对象的 ID selected），但我需要存储整个对象及其所有属性。不仅是 ID，还有姓名和电子邮件。

我查了一下之前的问题，一个解决方案似乎是将整个对象分配给 [value]。而不是：

[value]="customer.ID"

做：

[value]="customer"

但是，selected 时，我的输入值显示“Object Object”。我需要用户能够读取 selected ID，并存储整个对象。

我该怎么做？

Answer 1

尝试使用 displayWith

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

displayFn(customer) { return customer.ID; }

Answer 2

您需要在自动完成元素上设置 displayWith 属性。它需要一个将选项的值映射到它的显示值的函数。

您可以执行以下操作：

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let customer of filteredCustomers | async" [value]="customer">
    {{ customer.ID }}
  </mat-option>
</mat-autocomplete>

在 ts 文件中将函数定义为：

// Instead of 'any' type, use the type as per your use case
displayFn(customer: any): string {
  return customer && customer.ID ? customer.ID : '';
}

您可以在官方文档中阅读更多相关信息以及示例：Setting separate control and display values

使用 Angular 自动完成存储对象，不仅是输入中的值

Store Object with Angular Autocomplete, not only Value in Input

autocomplete

typescript

angular-material

angular

angular-reactive-forms