mat-autocomplete 選項無法找到屬性

Question

我正在嘗試使用此代碼進行自動完成。

現在，問題是我收到的選項為[object objecct] ，我知道那是因為我需要指定像option.name這樣的字段，但是當我收到does not exist error時。 要檢查我的選項是否為空或不是我打印它。 像下面

private _filter(value: string): string[] {
    if (value && value !== '') {
      const filterValue = value.toLowerCase();
      console.log('this',options)
       return this.options.filter(
        (option) =>
          option.name.toLowerCase().includes(filterValue) ||
          option.clock.toString().startsWith(filterValue)
      );
    } else {
      return [];
    }

output：

在此處輸入圖像描述

注意：我的代碼與上面的參考幾乎相同，只是我是另一個數組中的 map 特定字段。

 retrieveAbsence():void{
    this.employeeService.getAll()
    .subscribe(
    data => {
      this.employee = data;
      console.log(data);
    },
    error => {
      console.log(error);
    });
  }

this.options = this.employee.map(((i) => {
    return {
      id: i.id,
      clock: i.clock,
      payroll:i.payroll,
      name: i.firstName+' '+i.surName
  }}));

Output：詹姆斯·史密斯

Answer 1

您將下拉項的值用作 object，但您需要一個字符串。 只需將[value]="option"更改為[value]="option.name"

<mat-option
          *ngFor="let option of filteredOptions | async"
          [value]="option"
        >
      {{option.name}}
    </mat-option>

到

<mat-option
          *ngFor="let option of filteredOptions | async"
          [value]="option.name"
>
          {{option.name}}
        </mat-option>

Answer 2

嘗試使用{{option['name]}}也可以得到你需要的值[value]="option['name']"

Answer 3

在 mat-option 中，值應該是option.name而不是完整的 object。當您從 object 的數組中過濾時。您應該將單個值而不是完整的 object 分配給值。

 <mat-option *ngFor="let option of filteredOptions | async[value]="option.name">
{{option.name}}