Невозможно получить значения автозавершения углового материала

Я пытаюсь создать фильтр автозаполнения и из массива, и когда я пытаюсь его использовать, он отображается в нижнем регистре, теперь функция ниже - это мой код

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text"
           placeholder="Pick one"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.Address}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

.ts код:

 myControl = new FormControl();
  options:any [] = [
    
        {
            "Id": "SO5",
            "Address": "Wall Street. New York City"
           
        },
        {
            "Id": "65",
            "Address": "Wall Street. New York City"
        },
        {
            "buyerId": "63g",
            "Address": "Dallas"
        }

  ]
  filteredOptions: Observable<any[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value:any):any[] {
    console.log(value);
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

ниже моя ссылка на stackblitz https://stackblitz.com/edit/angular-ygzpcz


person Madpop    schedule 02.08.2020    source источник


Ответы (1)


options - это массив объектов. Для объекта нет toLowerCase метода.

Вместо этого вы должны использовать option.Address:

return this.options.filter(option => option.Address.toLowerCase()
                                          ^^^^^^^^^

Кроме того, в случае объектов вы должны создать метод displayWith, чтобы сопоставить объект с желаемым отображаемым значением:

html

<mat-autocomplete ... [displayWith]="displayWith">

ts

displayWith(item: any) {
  return item ? item.Address : ''
}

Раздвоенный Stackblitz

person yurzui    schedule 02.08.2020