【问题标题】:combineLatest is fired only for first eventcombineLatest 仅针对第一个事件触发
【发布时间】:2021-01-11 10:35:43
【问题描述】:

我有 3 个要组合的事件,当其中一个事件被触发时,调用该服务。我使用了combineLatest,但它只有在filterChanged 触发第一个事件时才有效。

filterChanged 是本地事件,其余的都是来自子组件的事件。我该如何解决这个问题,以发出其中一个事件,甚至从页面初始化开始?

filterChanged = new EventEmitter<boolean>();
paginatorChanged = new EventEmitter<MatPaginator>();
sortChanged = new EventEmitter<{}>();

ngAfterViewInit(): void {
   combineLatest(
      this.paginatorChanged,
      this.sortChanged,
      this.filterChanged
   ).pipe(
      startWith([null, null, null]),
      switchMap(value => {
      const paginator = value[0];
      const sort = value[1];
      const filters = value[2];
    
      return this.service.getFiltered(paginator, sort, filters);
   })).subscribe(data => this.data = data);
}    

applyFilter(): void {
  this.filterChanged.emit(true);
}

onPaginatorChanged(paginator): void {
  this.paginatorChanged.emit(paginator);
}

onSortChanged(sort): void {
  this.sortChanged.emit(sort);
}

谢谢

【问题讨论】:

    标签: angular typescript rxjs observable combinelatest


    【解决方案1】:

    这个问题目前还不清楚,但如果你想触发combineLatest 没有 filterChanged observable 至少发射一次,那么我会说你正在使用startWith 运算符错误。它应该单独通过管道传输到每个可观察的源。

    试试下面的

    ngAfterViewInit(): void {
      combineLatest(
        this.paginatorChanged.pipe(startWith(null)),
        this.sortChanged.pipe(startWith(null)),
        this.filterChanged.pipe(startWith(null))
      ).pipe(
        switchMap(value => {
        const paginator = value[0];
        const sort = value[1];
        const filters = value[2];
      
        return this.service.getFiltered(paginator, sort, filters);
        })
      ).subscribe(data => this.data = data);
    }
    

    对于本地多播 observables,您可以使用 RxJS Subject(或它的兄弟姐妹)而不是使用 Angular 特定的 EventEmitter

    【讨论】:

    • 太好了,谢谢。我认为我可以将 startWith() 用于所有事件结果,但需要为每个事件指定它。这是一个重构,在从智能组件中删除所有过滤器、排序和分页器之后,我将更改带有主题的事件(在服务内部,甚至是 ngrx 选择器(因为已在应用程序中使用))。非常感谢
    猜你喜欢
    • 2018-05-13
    • 1970-01-01
    • 1970-01-01
    • 2012-03-12
    • 1970-01-01
    • 1970-01-01
    • 2018-03-15
    • 2012-12-08
    • 1970-01-01
    相关资源
    最近更新 更多