Angular ngIf 与 Async Pipe

情境

当我们在 template 订阅一组资料，而需要对它做一些逻辑处理的时後。

不好的方式

.ts

export class TemplateComponent {
  products$: Observable<any> = this.apiService.fetchProd();
  constructor(public apiService: ApiService) {}
}

.html

<ng-container *ngIf="products$ | async as products;">
  <ng-container *ngIf="products.length > 0; else empty">
    <ng-container *ngFor="let item of products"> ...略 </ng-container>
  </ng-container>
</ng-container>
<ng-template #empty> No Data </ng-template>

若像上述这样的写法，会造成重覆订阅而增加 server 的负担，所以在实作上，通常会避免这情况发生

解决方式

使用 ngIf as

将 html 写法稍做修改

<ng-container *ngIf="(products$ | async)?.length > 0 as products; else empty">
  <ng-container *ngFor="let item of products"> ...略 </ng-container>
</ng-container>
<ng-template #empty> No Data </ng-template>

将 products$ | async 定义为 products。
这样就只会被订阅一次，而这麽做的好处也可以使程序码更容易阅读，

加上 shareReplay

在 ts 档里加上 shareReplay
.ts

export class TemplateComponent {
  products$: Observable<any> = this.apiService.fetchProd().pipe(
      shareReplay()
  );
  constructor(public apiService: ApiService) {}
}

还有一点要注意的是，在 ng-container 里，不能同时使用 ngIf 与 ngFor 否则会报错唷唷唷～

明天会接续来说 ng-container 与 ng-template 这件事

附录：RxJS Multicast 类 Operator (1) - multicast / publish / refCount / share / shareReplay