javascriptangularangular-materialmat-autocomplete

mat-autocomplete options not able to find property


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


Solution

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