带有搜索自定义管道的异步管道

Question

我有一个可观察的数据源，因为我从我的 API 中提取数据。 我想通过文本搜索数据并过滤它：

这里有我的 Pipe.ts：

@Pipe({
  name: 'filterText'
})
export class FilterTextPipe implements PipeTransform {

  transform(values, searchTerm): any {

      if (!values || !searchTerm) {
          return _.get(values, '_value', '');
      }

      return values._value.filter( item =>
         item.provider_business_name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
      );

  }

}

这里有我的模板：

<mat-card class="card-provider m-2 p-2" *ngFor="let provider of obs | filterText:searchText | async" />

这也是我的component.ts：

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    dataSource;
    searchText;
    obs: Observable<any>;

    constructor(
        private _providersService: ProvidersService,
        private dialog: MatDialog,
        private changeDetectorRef: ChangeDetectorRef
    ) { }

    ngOnInit() {
        this.changeDetectorRef.detectChanges();
        this.getProviders();
    }

    getProviders() {
        this._providersService.getAllProviders().subscribe(
            data => {
                this.dataSource = new MatTableDataSource(data);
                this.dataSource.paginator = this.paginator;
                this.obs = this.dataSource.connect();
            }
        );
    }

我这样做是因为我需要对卡片元素进行分页，但我无法将分页器和 FilterPipe 两者结合起来。

非常感谢！

Answer 1

Nvm 我找到了一个解决方案，我不知道它是否是最“干净”的方式，但它有效！

我在 Pipe 中删除了观察者的属性调用：

管道.ts：

 @Pipe({
      name: 'filterText'
    })
    export class FilterTextPipe implements PipeTransform {

      transform(values, searchTerm): any {

          if (!searchTerm) {
              return values;
          }

          return values.filter( item =>
             item.provider_business_name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
          );

      }

    }

我的模板如下所示：

<mat-card class="card-provider m-2 p-2" *ngFor="let provider of obs | async | filterText:searchText" >