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函数，或者我是否必须将旧的返回数据与旧的匹配，如果不同，则添加？

如果它们不同，则仅返回结果，rxjs Angular

0 个答案: