Angular 在其他异步管道中使用异步管道

我想在一个角度模板中使用一个异步管道，其中包含另一个异步管道

问题是，我的第二个异步管道返回

null

，因此没有打印任何内容。但是我的第一个异步管道工作得非常好

那么，如何在html模板中打印我的

zone.title

？我只能通过

doSomething（id）

methode获得它

template.component.html

{{site.title}

{{zone？.title}}

模板.component.ts

公共站点$：可见；
构造函数（私有siteService:siteService）{}
恩戈尼尼特（）{
this.sites$=this.siteService.getSites（）；
}
doSomething（id:string）：可观察{
返回此.siteService.getZoneById（id）；
}

site.service.ts

构造函数（私有http:HttpClient）{
getSites（）：可观察{
this.http.get（…）；
}
getZoneById（id:string）：可观察{
this.http.get（…）；
}

在模板中调用函数通常不是一个好主意，因为它会导致不可预知的结果

因此，您可以重构代码：

template.component.html

{{site.title}

{{zone？.title}}

模板.component.ts

公共站点$：可见；
构造函数（私有siteService:siteService）{}
恩戈尼尼特（）{
this.sites$=this.siteService.getSites（）.pipe(
地图（（站点）=>{
返回sites.map（site=>{
返回{
id:site.id，
标题：site.title，
分区$：此.doSomething（site.id），
};
})
})
);
}
doSomething（id:string）：可观察{
返回此.siteService.getZoneById（id）；
}

---

检查我的。

谢谢，因此您建议我在ts中创建一种新的数据格式并使用它。很高兴知道！