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

Question

我在使用 infinite-scroll 时遇到问题在我的mat-table .我使用 table.service.ts 获取数据来自后端的类。如何在我的电子表格中使用无限滚动功能，以便在我向下滚动时自动显示越来越多的内容。
窗口 - Angular 7。我使用 Material 表。
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);
  }

列表服务.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