Question

假设对象数组，

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

如何使用图书ID自动完成？

Answer 1

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

正在工作的stackblitz是 here。示例基于的Angular Material文档 here。

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

有没有一种方法可以使用角度材料自动完成功能来自动完成具有数字数据的对象？

2 个答案: