以异步方式填充表

问题描述 投票:0回答:1

我有一个包含大量数据的表。我将通过异步请求从服务器逐行获取这些数据。在每个响应中,我都会在表中填充新的一行。这样,用户应该能够一步一步查看表格填充。该请求按名称和日期进行。所以,这是我到目前为止所做的一个示例:

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

但是它实际上不能像这样工作。现在,表格仅向我显示最后一行。我想要的是不同的。它应该告诉我,它在请求完成后立即逐行创建。这是怎么了?

angular typescript asynchronous html-table
1个回答
0
投票

您可以将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;
  }, [])
)

function 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>
© www.soinside.com 2019 - 2024. All rights reserved.