以异步方式填写表格

Question

我有一张包含大量数据的表格。我会通过异步请求逐行从服务器获取这些数据。在每次回复时，我都会在表格中填满新行。通过这种方式，用户应该能够一步一步地看到表格填充，而不是一次。请求是按名称和日期的。所以，这是我到目前为止所做的一个例子：

dataObj$: Observable<{}>;

this.allDates.forEach(date => {
            let timeStamp = moment(date).valueOf();
            this.dataObj$ = this.service.getData(userName, timeStamp);
        });

这是结果：

{"date":1593900000000,"done":12,"progress":30}

这是桌子

<table>
  <tr>
    <th>

    </th>
    <th scope="col">
      Done
    </th>
    <th>
      Progress
    </th>
  </tr>
  <tr>
    <th scope="row">{{(dataObj$ | async)?.date | date: 'dd/MM/yyyy'}}</th>
    <td>{{(dataObj$ | async)?.done}}</td>
    <td>{{(dataObj$ | async)?.progress}}</td>
  </tr>
</table>

通过这种方式，我有一个表格，第一列中包含所有日期，完成和进度标签作为标题，其他数据填充表格的其余部分。类似的东西

      Done  Progress
data1  1       1    
data2  2       2    
data3  3       3

但实际上它不是这样工作的。现在表格只显示最后一行。我想要的不一样。它应该告诉我，一旦请求完成，它就会逐行创建。这里有什么问题？

Answer 1

您可以使用concat 运算符和scan 运算符来组合所有结果：

interface DataObject {
  date: number;
  progress: number;
  dont: number;
}

readonly data$: Observable<DataObject[]> = concat(
  ...this.allDates.map((date) => this.service.getData(userName, moment(date).valueOf()))
).pipe(
  scan((dates, date) => {
    dates.push(date);

    return dates;
  }, [])
)

trackByDate(i: number, data: DataObject): number {
  return data.date;
}

你可以在你的表中使用：

<table>
  <tr>
    <th></th>
    <th scope="col">Done</th>
    <th>Progress</th>
  </tr>
  <tr *ngFor="let data of data$ | async; trackBy: trackByDate">
    <td>{{ data.date | date: 'dd/MM/yyyy' }}</td>
    <td>{{ data.done }}</td>
    <td>{{ data.progress }}</td>
  </tr>
</table>

Working example 带有模拟请求