Angular 多次调用云函数

Question

我在 angular 项目中多次调用云函数时遇到问题。所以console.log('call')被执行了三次。

this.profileList$ = this.usersService.profileList(this.route.snapshot.paramMap.get('groupId')!).pipe(
      tap(() => console.log('call')),
      catchError(() => {
        this.toastrService.danger('You do not have permission to view this group', 'Error');
        return of([]);
      }),
    );

我试过用take(1)，但没用，好像和我处理我的profileList$有关系，因为如果我删除我的fieldsToSearch$我'我会少一个电话，如果我删除 .html 中的异步管道，我会少一个电话。但是，当然，如果我删除 fieldsToSearch$ 和异步管道，它将中断。

this.fieldsToSearch$ = this.profileList$.pipe(
      map((profiles) =>
        profiles.map((profile: any) => {
          const formattedProfile = { ...profile };
          formattedProfile.values = [ formattedProfile.displayName ];
          // Append sortedField values to values array
          for (const field of formattedProfile.sortedFields) {

 KEEPS GOING JUST FORMATTING DATA

感谢您的关注。

Answer 1

如何缓存响应并将其从缓存中提供给迟到的订阅者：

import { publishReplay, refCount } from 'rxjs/operators';

this.profileList$ = this.usersService.profileList(this.route.snapshot.paramMap.get('groupId')!).pipe(
      tap(() => console.log('call')),
      catchError(() => {
        this.toastrService.danger('You do not have permission to view this group', 'Error');
        return of([]);
      }),
      publishReplay(1),
      refCount(),
    );

Angular 多次调用云函数

Angular calling cloud function multiple times

firebase

angularfire2

angular