Question

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

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

# Application configuration to use Cloud Spanner with Spring Data JPA

# Spanner connection URL.
# - ${PROJECT_ID} Replace with your GCP project ID
# - ${INSTANCE_ID} Replace with your Spanner instance ID
# - ${DATABASE_NAME} Replace with your Spanner database name within your Spanner instance
spring.datasource.url=jdbc:cloudspanner:/projects/test-project/instances/test-instance/databases/spring-demo?usePlainText=true

# Specify the Spanner JDBC driver.
spring.datasource.driver-class-name=com.google.cloud.spanner.jdbc.JdbcDriver

# Specify the Spanner Hibernate dialect.
spring.jpa.properties.hibernate.dialect=com.google.cloud.spanner.hibernate.SpannerDialect

spring.jpa.hibernate.ddl-auto=update

# Settings to enable batching statements for efficiency
spring.jpa.properties.hibernate.jdbc.batch_size=100

# You may display SQL statements and stats for debugging if needed.
spring.jpa.properties.hibernate.show_sql=true
spring.jpa.properties.hibernate.format_sql=true

从上面的代码中可以看到，我有一个名为“ addRowData”的方法，该方法将API调用返回的数据传递给该方法。这是方法...

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);
        }
      );
  }

所以我想知道是否有更好的方法将异步连接在一起？我担心的是，在此过程运行期间，另一位用户正在更改要检索的数据，并可能导致重复的行等。

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

如果由于可观察性的某些更改两次收到相同的数据，则可以在rxjs中尝试使用distinctUntilChanged运算符。如果当前值与最后一个值不同，则该运算符将使可观察对象仅发出值。

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(...);

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

角材料表异步加载数据

2 个答案: