自动完成中的 filterOptions 不起作用

Question

我有这个demo

当我单击 + 时，我可以过滤状态并正确显示状态名称。 当我再次单击 + 添加 State 时，过滤器不起作用。

我有这个过滤器代码：

this.filteredStates = this.myform.controls['products_id'].valueChanges
  .pipe(
    startWith(''),
    map(state =>  this._filterStates(state))
  );

有什么想法吗？

Answer 1

也许不是最好的解决方案，但它确实有效。

所以问题是，在您添加更多字段后，表单数组的值开始如下所示：["3", "P"] 并且您的过滤器功能停止工作。

因此，如果您希望将跟踪表单值作为 Observable 保持您的方法，我已经制作了一个自定义管道来执行实际过滤。

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

@Pipe({
  name: 'myPipe'
})
export class MyPipe implements PipeTransform {

  transform<T>(value: string, list: T[], field: string, idx: number): T[] { 
    const filterValue = value[idx] ? value[idx].toString().toLowerCase() : '';
    return list.filter(state => state[field].toLowerCase().indexOf(filterValue) === 0);
  }

}

然后代替

*ngFor="let state of filteredStates | async

你使用管道

*ngFor="let state of filteredStates | async | myPipe: states : 'products_name': i"

它或多或少是通用的，所以它需要你的状态列表和一个要搜索的字段。

也在你的组件中替换

   this.filteredStates = this.myform.controls['products_id'].valueChanges
  .pipe(
    startWith(''),
    map(state =>  this._filterStates(state))
  );

与

   this.filteredStates = this.myform.controls['products_id'].valueChanges
  .pipe(
    startWith(['']),
  );

所以这种方式我们只是将值变化用作 Observable。 显然有些变量应该重命名。

就是这样。如果它不起作用，请发表评论，我错过了添加一些东西。

哦，是的 - 不要忘记将自定义管道添加到您的 AppModule 声明中

import { MyPipe } from './app/my-pipe.pipe';
...
declarations: [
    AutocompleteOverviewExample,
    MyPipe
],