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

Question

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

窗口 - 角度 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);
  }

liste.component.html

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

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

Answer 1

我希望这对你有所帮助。

无限滚动不能

很好地与mat-table一起使用，尽管它可以在不使用无限滚动模块或cdk-virtual-scrolling的情况下实现。

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

Answer 2

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

要实现虚拟滚动，您需要固定高度的项目，您可以使用材料CDK：https://material.angular.io/cdk/scrolling/overview

要实现无限滚动，我建议您使用交叉观察器：https://developer.mozilla.org/en/docs/Web/API/Intersection_Observer_API