我有一个包含大量数据的表。我将通过异步请求从服务器逐行获取这些数据。在每个响应中,我都会在表中填充新的一行。这样,用户应该能够一步一步查看表格填充。该请求按名称和日期进行。所以,这是我到目前为止所做的一个示例:
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
但是它实际上不能像这样工作。现在,表格仅向我显示最后一行。我想要的是不同的。它应该告诉我,它在请求完成后立即逐行创建。这是怎么了?
您可以将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>