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中观察者的属性调用：

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" >

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

1 个答案: