mat-autocomplete 选项无法找到属性

Question

I am try to do autocomplete using this code.

Now, the issue is I receiving option as [object objecct] , I understood that's because I need to specify the field like option.name but when I do getting does not exist error . To check I options empty or Not I print it. like below

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:

enter image description here

Note: My code is almost same as above reference, just I am map specific fields from another array.

 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: James Smith

Answer 1

You are using value of a dropdown item as and object, but you need a string. Just change [value]="option" to [value]="option.name"

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

to

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

Answer 2

Try with {{option['name]}} also to get the value you will need to [value]="option['name']"

Answer 3

In the mat-option, the value should be option.name rather than complete object. As you are filtering from an array of object. you should assign the single value not the complete object to value.

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