如何从api中过滤可观察数据

Question

public rows$: Observable<any[]>;
ngOnInit(): void {
this.rows$ = this.StockService.findAll();
}
searchData(event: any) {
let term: string = event.target.value;
console.log(term);
this.rows$.pipe(
map((items) =>
items.filter(
(item) =>
item.prdoct_code=== term ||
item.product_name === term ||
)
)
);
}

我想添加一个对ngx数据表的搜索，这是我的编码方式，但搜索后，ngoniit工作，而不是过滤数据，所有产品都来了，没有出现在表中？

Answer 1

简单地表达this.rows$.pipe(...)不会影响原始可观察到的，它定义了一个新的可观察到。

在您的案例中，您需要将rows$定义为依赖于两个不同来源的可观察项：股票服务结果(items(和搜索项(term(。所以，你需要一种方法让你的搜索词是可观察的。我们可以使用-BehaviorSubject：

private term$  = new BehaviorSubject<string>('');
private items$ = this.StockService.findAll();
public rows$: Observable<any[]> = combineLatest([this.items$, this.term$]).pipe(
map(([items, term]) => items.filter(
(item) =>
term === '' ||
item.prdoct_code === term ||
item.product_name === term
))
);

searchData(event: any) {
const term: string = event.target.value;
this.term$.next(term);
}

行private term$ = new BehaviorSubject<string>('')定义了发出空字符串''的初始值的主题。我们可以通过调用主题的.next()方法并传递一个值来在主题中推送值。

我们使用combineLatest来定义具有多个源的单个可观察到的。每当任何源发出值时，combineLatest都将从每个源发出最新的值。因此，无论何时调用searchData()方法，list和term的最新值都将被发出并通过.pipe(map(...))中的过滤器逻辑。