如何在 Angular 7 中將無限滾動與 mat-table 和服務結合使用？

Question

我在mat-table使用infinite-scroll時遇到問題。 我從后端使用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