时间戳

首页 > 解决方案 > 如何为角度表创建输入过滤器？

angular - 如何为角度表创建输入过滤器？

问题描述

我正在尝试在 Angular 11 项目中实现一个带有输入过滤器的表。该表由 SERVICE 填充：

export class Service{
 url='myUrl';

 http; 

 constructor(private http:HttpClient){
  this.http=http
 } 

 loadAll(): Observable<Author[]> {
  return this.http.get<Author[]>(this.url)
}

在我的组件中，我有一个变量“filteredAuthors$”，它将代表表中显示的所有数据。

export class MyComponent{
 authors$:Observable<Author[]>
 filteredAuthors$:Observable<Author[]>

 //form that receive the input filter
 filterForm:FormControl

 constructor(private service:Service){
  this.authors$=service.loadAll()

  filterForm=new ForControl('')

  this.filteredAuthors$=filterForm.valueChanges.pipe(
   startWith('').withLatestFrom(this.authors$),
   map(
    ([typedValue, authors])=>!typedValue ? authors : 
     authors.filter(author=>author.name.includes(typedValue))
)))}}

使用此代码，我总是以 0 行开始我的表格，并且在我输入一些内容后，过滤器工作得很好。另一个奇怪的事情是，当我用“of”方法创建的模拟可观察对象替换我的服务时，表从所有行开始，并在过滤器中的第一个输入之后被过滤。我没有看到什么？作者类型为：

export type Author={
 id:string,
 name:string
}

标签： angularfilterobservableangular-reactive-formsreactive

解决方案

  1. of是同步的，因此您将跳过延迟可观察的所有可能的异步副作用——例如网络调用。
  2. withLatestFrom将阻塞直到给定的 observable 发出事件。因此，直到 authors$ 完成（假设是网络调用），管道下的处理被抑制。（这里的第二个例子证实了https://www.learnrxjs.io/learn-rxjs/operators/combination/withlatestfrom）

推荐阅读