我们有一个页面,其中有多个部分。每个部分可以有一张卡片或一张桌子。一个可观察对象使用异步管道在html中绑定数据。现在,我需要更新表之一,而无需刷新整个可观察的表。
loadPageData(Id): void {
this.sections$ = this.psService.getLoadPageData(Id).pipe(
switchMap(sections => forkJoin(
sections.map(section => this.psService.getSectionData(section.sectionID).pipe(
map(card => Object.assign({}, section, { card })),
switchMap(c => c.card.map(card => iif(() => card.cardTypeId === 3,
from(this.psService.getTable(this.tablePerodID).pipe(map(table => Object.assign({}, c, { table })))),
of(c))))
).concatAll()
))
));
}
updateTable(sectionId, tablePerodID) {
let tableData;
this.psService.getTable(tablePerodID).subscribe((data) => {
tableData = data;
});
this.sections$.forEach(sections => {
sections.forEach(section => {
if (section.sectionID === sectionId) {
section.table = sectionData;
}
});
});
}
HTML就像:
<div *ngFor="let section of sections$ | async;">
<div *ngFor="let card of section.card | sort:'displayOrder';">
<app-card></app-card>
<div *ngIf="card.cardTypeName === 'Table'">
<app-table></app-table>
</div>
</div>
</div>
现在的问题是,当我尝试使用updateTable加载表的数据时(当用户更改tablePerodID时),它什么也不做。我试过了,.next()
但整体上更新了section$
。反正我只能更新表吗?
感谢@adrisons给我缓存的想法。这是对我有用的解决方案。它与@adrisons答案略有不同,因为它不使用可观察的方式。
_cached: any;
sections$: Observable<any>;
loadPageData(Id): void {
// Load data from server
this.sections$ = this.psService.getLoadPageData(Id).pipe(
switchMap(sections => forkJoin(
sections.map(section => this.psService.getSectionData(section.sectionID).pipe(
map(card => Object.assign({}, section, { card })),
switchMap(c => c.card.map(card => iif(() => card.cardTypeId === 3,
from(this.psService.getTable(this.tablePerodID)
.pipe(map(table => Object.assign({}, c, { table })))),
of(c))))
).concatAll()
))
), first(), // Tap and get the first emit and assign to cache
tap((data: any) => {
this._cached = data // Caching the data without subscribing.
}));
}
updateTable(sectionId, tablePerodID) {
// Get table Data from backend and update cache
this.psService.getTable(tablePerodID).subscribe((data) => {
this._cached.map(section => {
if (section.sectionID === sectionId) {
section.table = data;
}
});
});
// Refresh async observable from cache
this.refreshFromCache();
}
refreshFromCache() {
this.sections$ = of(this._cached)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句