angular - 有没有办法使用角度材料自动完成来自动完成具有类型编号的对象数组的对象？

Question

假设对象数组，

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

在这里可以看到数组中每个元素的id都是一个数字。当对象数组采用给定格式时，角度自动完成组件不起作用。任何解决方法？如何使用书的id自动完成？

Answer 1

是的，您可以，您只需id在过滤之前将其转换为字符串。

工作 stackblitz 在 这里。示例基于 此处的 Angular Material 文档。

我对示例进行了两项更改以使其正常工作，因此您可以按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>