javascript - 仅在结果不同时才返回结果，rxjs Angular

Question

我正在构建一个具有材料数据网格的组件

在每一行中，我动态创建一个组件并添加到最后一个单元格，它被设置为省略号（查看更多按钮）

我有一个函数可以将它们添加到表格单元格中，并从 api 调用返回的数据中向它们添加信息

  addEllipsisToTable() {
    setTimeout(() => {
      let sideMenu = this.sideMenu.toArray()
      // Add ellipsis menus' to returned results
      for (let i = 0; i < sideMenu.length; i++) {
        const factory = this.resolver.resolveComponentFactory(this.ellipsis);
        let container = this.sideMenu.toArray()[i]
        const ellipsisComponent = container.createComponent(factory);
        ellipsisComponent.instance.data = this.returnedData[i]
      }
    }, 300)

  }

这可行，但是当我使用搜索字段过滤记录时，有时省略号会添加两次。

这是搜索的代码：

let txt: Filter;
    fromEvent(this.input.nativeElement, 'keyup')
      .pipe(
        debounceTime(200),
        distinctUntilChanged(),
        tap(() => {
          this.filtersArray = [];
          txt = {
            Value: this.input.nativeElement.value,
            Operation: 5,
            Property: 'Name'
          }
          this.filtersArray.push(txt);
        })
      )
      .subscribe((data) => {
        this.paginator.pageIndex = 0;
        this.loadUserPage();//reloads datagrid
      });

当您键入并返回数据时，将执行 getPagedInfo 函数，该函数删除省略号，获取数据，然后将新的添加回：

getPagedInfo() {
    return this.dataSource.pagedInfoSubject
      // .skip(1)
      .pipe(
        tap(() => this.removeEllipsisFromTable())
      )
      .subscribe((data) => {
        this.selection.clear();
        this.totalItems = data.totalItems;
        this.returnedData = data.returnedData;
        this.addEllipsisToTable()//This sometimes gets performed twice
        console.log(this.returnedData)
        //returnedData holds array of current visible items
        if (this.totalItems == 0) {
          this.filtersArray = [];
        } else if (this.totalItems < 10) {
          this.filtersArray = [];
        }
      });
  }

是否有我可以使用的 rxjs 函数，或者我是否必须将新返回的数据与旧数据匹配，如果不同，然后添加？

标签： javascriptangularrxjs5