Есть ли способ использовать угловое автозаполнение материала для автозаполнения объектов с числовыми данными?

Question

Предположим, что массив объектов,

books = [{id:1, name: 'book1'}, {id:2, name: 'book2'}];

Как я могу использовать идентификатор книги для автозаполнения?

Answer 1

Да, вы можете просто преобразовать id в строку, прежде чем фильтровать.

Рабочий стек может быть здесь. Пример основан на документации углового материала отсюда.

Я сделал два изменения в примере, чтобы он работал, чтобы вы могли фильтровать по id,

Сначала в ngOnInit Я убедился, что использовал id атрибут Book объект для передачи в _filter функция.

ngOnInit() {
  this.filteredOptions = this.myControl.valueChanges
    .pipe(
      startWith<string | Book>(''),
      map(value => typeof value === 'string' ? value : value.id),
      map(id => id ? this._filter(id) : this.options.slice())
    );
}

И в _filter сама функция просто конвертировать id в строку.

private _filter(id: number | string): Book[] {
  const filterValue = String(id);
  return this.options.filter(option => String(option.id).toLowerCase().indexOf(filterValue) === 0);
}

Answer 2

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

      import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterac'
})
export class FilterACPipe implements PipeTransform {

  transform(value: any[], ...args: any[]): any[] {
    if (args[0] && args[0].length) {
      value = value.filter(nextVal => {
        // Add lowercase, or can work on more complex objects.
        return (nextVal.indexOf(args[0]) > -1);
      });
    }
    return value;
  }

}

А затем в HTML:

            <mat-option *ngFor="let option of dataArray | filterac : myControl.value" [value]="option">
        {{option}}
      </mat-option>