我有一个可观察的数据源，因为我从我的 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 两者结合起来。
太感谢了！
Nvm 我找到了一个解决方案，我不知道它是否是最“干净”的方式，但它有效！
我在我的管道中删除了我的观察者的属性调用：
管道.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" >
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句