如何为 angular table 创建输入过滤器？

Question

我正在尝试在 Angular 11 项目中实现带有输入过滤器的 table。 table 由服务填充：

export class Service{
 url='myUrl';

 http; 

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

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

在我的组件中，我有一个变量“filteredAuthors$”，它将代表 table.

中显示的所有数据

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 行开始我的 table，并且在我输入内容后，过滤器工作得很好。另一件奇怪的事情是，当我用使用“of”方法创建的模拟可观察对象替换我的服务时，table 从所有行开始，并在过滤器中的第一个输入之后被过滤。我没有看到什么？作者类型是：

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

Answer 1

of 是同步的，因此您将跳过延迟可观察对象的所有可能的异步副作用 - 就像网络调用一样。
withLatestFrom 将阻塞直到给定的 observable 发出事件。因此，在 authors$ 完成之前（假设有一个网络调用），管道中的处理将被抑制。（此处的第二个示例确认 https://www.learnrxjs.io/learn-rxjs/operators/combination/withlatestfrom）

如何为 angular table 创建输入过滤器？

How to create a input filter for a angular table?

filter

observable

reactive

angular

angular-reactive-forms