javascript - 如何在 Angular 的异步管道中合并数据

Question

我在 Angular 6 中使用异步管道展示了 YouTube 视频。它在第一次加载时运行良好。

这就是我的使用方式。

组件 HTML 文件:

<div id="youtube" class="search-results" *ngIf="(trendingVideos | async) as videos; else loadingOrError"></div>

组件 TS 文件:

public trendingVideos: Observable<VideoClass[]>;
private loadVideos(videosPerPage?: number, regionCode?: string, videoCategoryId?: number) {
      this.trendingVideos = this.youtubeService.getTrendingVideos(videosPerPage, regionCode, videoCategoryId, false)
        .pipe(
          catchError((error: any) => {
            this.loadingError$.next(true);
            return throwError(error);
          })
        );
  }

捕获错误也能正常工作。

服务文件:

public getTrendingVideos(videosPerPage?: number, regionCode?: string, videoCategoryId?: number, paginationMode?: boolean): Observable<VideoClass[]> {
    const params: any = {
      part: appConfig.partsToLoad,
      chart: appConfig.chart,
      videoCategoryId: videoCategoryId ? videoCategoryId : appConfig.defaultCategoryId,
      regionCode: regionCode ? regionCode : appConfig.defaultRegion,
      maxResults: videosPerPage ? videosPerPage : appConfig.maxVideosToLoad,
      key: appConfig.youtubeApiKey
    };
    return this.http.get<any>(appConfig.getYoutubeEndPoint('videos'), { params })
      .pipe(
        map(
          (data) => {
            return data.items
              .map((item) => new VideoClass(item))
              .filter((item) => item.id !== '');
          }
        ),
        catchError(this.handleError('getTrendingVideos'))
      ) as Observable<VideoClass[]>;
  }

当我第一次加载数据时它工作正常。现在我正在开发无限滚动。所以我再次调用这个API。但是想要将数据合并到之前加载的数据中。

当我的无限滚动插件调用它时，它每次都会用新数据替换数据。

这是无限滚动功能:

private onScroll(){
    let videosData:Observable<VideoClass[]> = this.youtubeService.getTrendingVideos(this.videoCount, this.regionCode, this.categoryID, true)
    .pipe(
      catchError((error: any) => {
        this.loadingError$.next(true);
        return throwError(error);
      })
    );
    // Here how i merge this same video data to previously loaded trending videos data.
  }

有什么帮助吗？

Answer 1

您只需要使用 rxjs 映射运算符并在其中返回一个新数组，在您的情况下是这样的:

编辑:

使用行为主题通过 api 调用获取新视频。

这是一个活生生的例子:Stackblitz

component.ts

private videos = [];
private newVideos$ = new BehaviorSubject<VideoClass[]>([]);
public trendingVideos: Observable<VideoClass[]>;

ngOnInit(){
   this.trendingVideos = this.newVideos$.pipe(
     filter(data => data.length > 0),
     map(data => {
        this.videos = [...this.videos, ...data];
        return this.videos;
     });
}
private loadVideos(videosPerPage?: number, regionCode?: string, videoCategoryId?: number) {
  this.youtubeService.getTrendingVideos(videosPerPage, regionCode, videoCategoryId, false)
    .pipe(
      catchError((error: any) => {
        this.loadingError$.next(true);
        return throwError(error);
      })
    ).subscribe(newVideos => this.newVideos$.next(newVideos));
}

希望对您有所帮助!