Angular mat-autocomplete 不適用於 function 返回的選項

Question

I have took autocomplete example from Material official web site and changed getting options from variable of component class to function, options display but I can't select anything, clicking on drop-down doesn't select a value.

這是 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;
}

Answer 1

由於 function 返回 ngFor 的數據源，點擊 mat-option 觸發變化檢測，導致 ngFor 獲取新數組並生成新 mat-option 導致選擇不起作用。 您可以通過使用 trackBy function 來防止這種情況

組件.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;

工作示例