时间戳

首页 > 解决方案 > 有没有办法使用角度材料自动完成来自动完成具有类型编号的对象数组的对象？

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

问题描述

假设对象数组，

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

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

标签： angularautocompleteangular-materialnumericmat-autocomplete

解决方案

是的，您可以，您只需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);
}

推荐阅读