时间戳

首页 > 解决方案 > Angular mat-autocomplete 不适用于函数返回的选项

angular - Angular mat-autocomplete 不适用于函数返回的选项

问题描述

我已经从 Material 官方网站获取了自动完成示例，并将获取选项从组件类的变量更改为功能，选项显示但我无法选择任何内容，单击下拉菜单不会选择值。

这是 StackBlitz 上的示例项目。

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options()" [value]="option">
    {{option.value}}
  </mat-option>
</mat-autocomplete>

export class AutocompleteSimpleExample {
  myControl = new FormControl();
  options(): KeyValue[] {
    return [{ key: "1", value: "One" }];
  }
}
interface KeyValue {
  key: string;
  value: string;
}

标签： angulartypescriptangular-material

解决方案

由于函数返回ngFor的数据源，点击mat-option会触发变化检测，导致ngFor获取新数组并生成新的mat-option，导致选择无效。您可以通过使用 trackBy 功能来防止这种情况

组件.html

 <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options();trackBy:trackByIdentity" [value]="option">
        {{option.value}}
      </mat-option>
    </mat-autocomplete>
    <!-- #enddocregion mat-autocomplete -->
  </mat-form-field>

组件.ts

trackByIdentity:TrackByFunction<{key:string,value:string}> = (index: number, item: any) => item.key;

工作示例

推荐阅读