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

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);
}