如何在 Angular 7 中将无限滚动与 mat-table 和服务结合使用？

Question

我在mat-table 中使用infinite-scroll 时遇到问题。我从后端使用 table.service.ts 类获取数据。如何在我的电子表格中使用无限滚动功能，以便在我向下滚动时自动显示越来越多的内容。

Window - Angular 7。我使用 Material Table。

liste.component.ts

private load() {
    const liste_sub = this.liste_Service.loadListe('001', 0, LIST_SIZE).subscribe(
      liste=> {
        this.dataSource.data = liste;
      },
      (err: HttpErrorResponse) => {
        // onError()-Rumpf
        this.handleHttpError(err);
      });
    this.subscription.add(liste_sub);
  }

liste.service.ts

  public loadListe(from: number, size: number): Observable<Liste[]> {
    if (!this.cache$ || this.from_cashe$ !== from || this.size_cashe$ !== size) {
      this.from_cashe$ = from;
      this.size_cashe$ = size;
      this.cache$ = this.doRequest(from, size).pipe(
        shareReplay(CACHE_SIZE)
      );
    }
    return this.cache$;
  }

  private doRequest(from: number, size: number): Observable<Liste[]> {
    const params  = new HttpParams().append('from', from.toString()).append('size', size.toString());
    const url = this.API_URL.replace(':vertragsnummer', vertragsnummer);
    const httpOptions = { headers, params };
    return this.httpClient.get<Liste[]>(url, httpOptions);
  }

liste.component.html

<table mat-table [dataSource]="dataSource">
....

</table>

我想在我的表格中添加虚拟滚动。它应该加载与页面大小一样多的内容。如果用户向下滚动，它应该加载并显示更多内容。在这种情况下，模具页面会越来越长。滚动条不应显示在表格内。所以没有额外的滚动条。

Answer 1

希望this能帮到你。

无限滚动不适用于 mat-table，尽管它可以在不使用无限滚动模块或 cdk-virtual-scrolling 的情况下实现。

阅读更多相关信息 https://github.com/angular/components/issues/9858

Answer 2

无限滚动和虚拟滚动是不同的东西。

要实现VirtualScroll，你需要固定高度的项目，你可以使用materialCDK：https://material.angular.io/cdk/scrolling/overview

要实现 InfinityScroll，我建议您使用 Intersection Observers： https://developer.mozilla.org/en/docs/Web/API/Intersection_Observer_API