Question

“我的自动完成”显示具有以下定义的对象的值：

export class Person {
  id: number;
  name: string;
  cityName: string;
}

这是自动完成模板：

<mat-form-field class="example-full-width">
  <input type="text" placeholder="Person" aria-label="Person" matInput formControlName="personId" [matAutocomplete]="auto">

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
      <mat-option *ngFor="let item of filteredOptions" [value]="item">
        {{ item.name }}
      </mat-option>
  </mat-autocomplete>
</mat-form-field>

这是displayWith函数：

displayFn(value?: any) {
  return value ? value.name : undefined;
}

它可以工作，但是绑定到此自动完成功能的formControl会接收整个item对象：

 {
    id: 1;
    name: "John";
    cityName: "Dallas";
 }

如何在formControl中仅获取“ id”值？

Answer 1

您必须做两件事。

更新模板，以使[value]绑定到id而不是对象。
更新displayFn，以便使用传入的id查找对象并返回名称，该名称随后将显示在输入中。

<mat-form-field class="example-full-width">
  <input type="text" placeholder="Person" aria-label="Person" matInput formControlName="personId" [matAutocomplete]="auto">

  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
      <mat-option *ngFor="let item of filteredOptions" [value]="item.id">
        {{ item.name }}
      </mat-option>
  </mat-autocomplete>
</mat-form-field>

displayFn(value?: number) {
  return value ? this.filteredOptions.find(_ => _.id === value).name : undefined;
}

Answer 2

FormControl接收整个项目，因为您将每个[value]的{{1}}属性绑定到整个项目。

要拥有它，以便仅将<mat-option>传递给id替换：

FormControl

使用

<mat-option *ngFor="let item of filteredOptions" [value]="item">

如伊戈尔所说，您将需要更新<mat-option *ngFor="let item of filteredOptions" [value]="item.id">函数以显示displayFn的名称。

MatAutocomplete值X显示

2 个答案: