构建可观察的子对象和可观察的父对象Angular

Question

我在一个Angular项目中工作，我试图通过使用rxjs运算符来填充带有其父对象的子对象属性。这些物体看起来像这个

[
{idSite:1,siteName:"Site of First Enseigne", enseigneId:1,enseigne: null},
{idSite:1,siteName:"Site of Second Enseigne", enseigneId:2,enseigne: null},
]
[
{idEnseigne:1,name:"First Enseigne", sites:[]},
{idEnseigne:2,name:"Second Enseigne", sites:[]},
]

我想得到的网站与他们的enseignes:

[
{
idSite:1,
siteName:"Site of First Enseigne", 
enseigneId:1,
enseigne: {idEnseigne:1,name:"First Enseigne", sites:[]}
},
{
idSite:1,
siteName:"Site of Second Enseigne", 
enseigneId:2,
enseigne: {idEnseigne:2,name:"Second Enseigne", sites:[]}
},
]

我使用站点服务

fetchAllSites() : Observable<Site[]>{ // which request all site in my API
let url = `${this.provider}all`;
return this.http.get<Site[]>(url);
}

以及作为现场服务的enseigne服务

我试图用这种方法填充fetchAllSites中的所有站点值，但也许我做的方式不对

export class DashboardComponent implements OnInit, {
sites!: Site[]
enseignes!: Enseigne[]
ngOnInit(): void {
this.LoadTabcomponent();
}
LoadTabcomponent(){
this.siteService.fetchAllSites().pipe(
map(sites => {
sites.map( site => {
this.enseigneService.getEnseignes().pipe(
map( enseignes => {
enseignes.map( enseigne => {
if(site.enseigneId === enseigne.idEnseigne){
site.enseigne = enseigne
}
})
})
)
})
})
) 
}
}

我的web API在c#中，我应该从API获得完整的对象，但它不支持序列化，因为我需要完成更多的对象才能获得我想要的东西，所以我正在尝试在Webapp中构建对象。

Answer 1

您可以尝试使用combineLatest或forkJoin运算符来合并这两个结果，如下所示：

combineLatest([
this.siteService.fetchAllSites(),
this.enseigneService.getEnseignes()
]).pipe(
map([sites, enseignes] => {
... you merge code here
})
).subscribe((sites)=> this.sites = sites);