Angular 材质表异步加载数据

Question

我有一个材料表，用于显示来自 API 调用的数据。 API 返回大量数据。为了使应用程序交互更快、更高效，我们实现了分页。例如，初始调用检索 5 条记录并呈现表。然后，我们将进行后续调用以获取其余数据。我们正在通过添加返回的数据并使用返回的数据重新呈现表格来更新数据源。

使用解析器检索初始数据（出于性能目的）。然后我在 oninit 中运行一个方法...

getTimecardSynch() {
    // Number of records to retrieve
    const pageSize = 5;
    // Call to method...passing in pageSize and pageNumber
    this._timecardManagementService
      .getIncrementalSubmittedTimecards(pageSize, this.pageNumber)
      .subscribe(
        (timecardResponse) => {
          // Increment pageNumber
          this.pageNumber++;
          // Update table datasource with retrieved data
          this.addRowData(timecardResponse);
          // Test whether pageSize is equal to the number of records returned.
          // If true, there are probably more records to retrieve and call needs made again.
          if (pageSize === timecardResponse.length) {
            // Make call to retrieve timecards again
            this.getTimecardSynch();
          } else {
            // Set the dataNotLoaded boolean to false so the interface is changed
            this.dataNotLoaded = false;
            // Show the snackbar message to the end user
            this.openSnackbar('All Timecards Loaded', '', '');
          }
        },
        (err) => {
          console.error(err);
        }
      );
  }

从上面的代码中可以看出，我有一个名为“addRowData”的方法，用于传递 API 调用返回的数据。方法如下……

  addRowData(row_obj) {
    // Add the retrieved data from the row_obj parameter to the datasource array
    this.dataSource.data.push(...row_obj);
    // Re-render the table rows
    this.table.renderRows();
    // Reload the table
    this.updateTable(this.timecards);
  }

所以我想知道是否有更好的方法可以将它们异步绑定在一起？我担心的是，正在检索的数据在此过程运行时被另一个用户更改，并可能导致重复行等。

Answer 1

1. No need to push the data in this.dataSource.data because at a time will 
   display the requested data only(means based on pagination)
2. Use public dataSource = new MatTableDataSource<any>();
   this.dataSource = new MatTableDataSource(timecardResponse);
3. No need to call any method like this.addRowData(timecardResponse);

Answer 2

如果由于 observable 的一些变化而两次接收到相同的数据，你可以尝试 rxjs 中的distinctUntilChanged 运算符。如果当前值与上一个不同，此运算符将使 observable 仅发出值。

const incrementalSubmittedTimecards$ = this._timecardManagementService
  .getIncrementalSubmittedTimecards(pageSize, this.pageNumber).pipe(distinctUntilChanged());

incrementalSubmittedTimecards$.subscribe(...);

如果你想在两次连续发射之间有一个时间间隔并且只获取最新的数据，你可以尝试 rxjs 中的debounce 运算符。此运算符不会考虑在指定时间内发出的任何值，并且只考虑指定时间结束时的最新值。

const incrementalSubmittedTimecards$ = this._timecardManagementService
  .getIncrementalSubmittedTimecards(pageSize, this.pageNumber).pipe(debounce(() => timer(1000)));

incrementalSubmittedTimecards$.subscribe(...);

如果我的理解有误，请纠正我。谢谢