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

Question

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

窗口 - Angular 7。我使用材料表。

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);
  }

列表组件.html

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

</table>

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

Answer 1

我希望这会帮助你。

无限滚动不适用于 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