防止在ng中进行多个请求

html5 • • 问答

我将 img 与 src 绑定到 api 调用。

<img [src]="getSiteImage(site.id)" />

在我的组件中，我有：

  public getSiteImage(id:number) {
    this.sitesClient.getSiteImage(5).subscribe((res: any) => {
      return res.image
    })
  }

当组件渲染 getSiteImage() 使用相同的 id 值被多次调用时，所以有很多不必要的调用（在 ngFor 内部，所以我认为它的内部 Angular 行为在组件渲染时执行此 ngfor 几次）。有没有办法只为特定的 id 调用一次这个请求？

回答

这正是将函数绑定到指令不是一个好主意的原因。在默认更改检测策略的情况下（类似于您的），该功能将在每个更改检测周期中触发。

方案一：局部变量

在 中触发请求ngOnInit，将响应存储在变量中并绑定它。forkJoinwithArray#map用于并行触发多个请求。然后使用 RxJSmap运算符将值附加到现有对象。

控制器

ngOnInit() {
  forkJoin(
    this.sites.map(site => this.sitesClient.getSiteImage(site.id).pipe(
      map((res: any) => ({...site, 'imageSrc': res.image))
    )
  ).subscribe((sites: any) => {
    this.sites = sites;
  });
}

模板

<ng-container *ngFor="let site of sites">
  ...
  <img [src]="site.imageSrc" />
</ng-container>

解决方案2：async管道

如果不需要控制器中的订阅，则可以使用async模板中的管道来触发请求，而不是控制器中的订阅。

控制器

sites$: Obseravble<any>;

ngOnInit() {
  this.sites$ = forkJoin(
    this.sites.map(site => this.sitesClient.getSiteImage(site.id).pipe(
      map((res: any) => ({...site, 'imageSrc': res.image))
    )
  );
}

模板

<ng-container *ngIf="(sites$ | async) as sitesRes">
  <ng-container *ngFor="let site of sitesRes">
    ...
    <img [src]="site.imageSrc" />
  </ng-container>
</ng-container>

以上是防止在ng中进行多个请求的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>