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

Question

我想在带有另一个异步管道的角度模板中使用异步管道。

问题是我的第二个异步管道返回null，所以没有打印。但是我的第一个异步管道运行良好。

那么我该如何在我的 html 模板中打印我的 zone.title 呢？我只能通过doSomething(id) 方法获得它。

template.component.html

<div *ngFor="let site of sites$ | async">
  <p>{{site.title}}</p>
  <div *ngIf="doSomething(site.id) | async as zone">
     <p>{{zone?.title}}<p>
  </div>
</div>

template.component.ts

public sites$: Observable<{id: string, title: string}[]>;

constructor(private siteService: SiteService) {}

ngOnInit() {
  this.sites$ = this.siteService.getSites();
}

doSomething(id: string): Observable<{id: string, title: string}> {
  return this.siteService.getZoneById(id);
}

site.service.ts

constructor(private http: HttpClient) {}

getSites(): Observable<{id: string, title: string}[]> {
  this.http.get(...);
}

getZoneById(id: string): Observable<{id: string, title: string}> {
  this.http.get(...);
}

Answer 1

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

所以你可以重构你的代码：

template.component.html

<div *ngFor="let site of sites$ | async">
  <p>{{site.title}}</p>
  <div *ngIf="site.zone$ | async as zone">
     <p>{{zone?.title}}<p>
  </div>
</div>

template.component.ts

public sites$: Observable<{
  id: string,
  title: string,
  zone$: Observable<{id: string, title: string}>
}[]>;

constructor(private siteService: SiteService) {}

ngOnInit() {
  this.sites$ = this.siteService.getSites().pipe(
    map((sites) => {
      return sites.map(site => {
        return {
          id: site.id,
          title: site.title,
          zone$: this.doSomething(site.id),
        };
      })
    })
  );
}

doSomething(id: string): Observable<{id: string, title: string}> {
  return this.siteService.getZoneById(id);
}

查看我的Stackblitz example。