Угловой объект автозаполнения - PullRequest
Новая
       8

Угловой объект автозаполнения

0 голосов
/ 21 мая 2018

Я пытаюсь понять, как использовать автозаполнение углового материала при использовании объекта.Я в основном следовал за Angular Docs и просто заменил массив параметров на объект параметров, но я не уверен, как заставить его работать.Можете посмотреть здесь?Я удалю вопрос, если у него много ответов в других местах.

Вот мои компоненты html и ts.Весь импорт и все определенно правильно, поэтому я не показываю ничего из этого. 

<mat-form-field>
  <input matInput [formControl]="myControl" [matAutocomplete]="auto">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

  ###############################

  myControl: FormControl = new FormControl();
  filteredOptions: Observable<string[]>;

  options = [
    {color: 'One'},
    {color: 'Two'},
    {color: 'Three'},
  ];

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

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().includes(val.toLowerCase()));
  }

1 Ответ

0 голосов
/ 21 мая 2018

Вы почти у цели, вам нужно только сопоставить ваш массив с внутренними свойствами ваших объектов.Это необходимо, так как возвращаемое значение вашей функции фильтра представляет собой массив строк. 

filter(val: string): string[] {
  return this.options.map(x => x.color).filter(option =>
    option.toLowerCase().includes(val.toLowerCase()));
}

Демо

...