試圖在沒有桌子的情況下使用角度材料分頁器

Question

---

我開始使用完整的示例“包含排序，分頁和過濾的數據表”。 這里https://material.angular.io/components/table/examples它工作正常。 但是現在我想使用沒有表的paginator，所以我在html文件中替換了“<mat-table ... </ mat-table>”，只需：

<div *ngFor="let row of dataSource.connect() | async" >
{{ row.id }} {{ row.name }} {{ row.progress }} {{ row.color }} <br>
</div>

但它看起來並不正常，因為它似乎：

• connect（）在啟動時運行多次
• 只是懸停paginator箭頭使它再次運行多次
• 在過濾器中輸入一個字母也是一樣的

我想這不是正確的方法。

最后，我想重復使用相同的方法來顯示卡片，使用過濾和分頁器。

TIA提供任何幫助。

J.P

---

我把代碼放在這里： https ：//angular-6q44a4.stackblitz.io我添加了一些console.log來顯示會發生什么（不是在stackblitz上），但這是一個例子：

只需將箭頭懸停，然后單擊，即可看到許多renderData。

雖然相同的代碼，但有一個表，它按預期工作：

---

我使用mini-fab按鈕重新創建了一個paginator，靈感來自http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google中的一些代碼，添加了幾個過濾器，它工作正常:)

Answer 1

你可能已經設法解決了這個問題但是，因為我一直在尋找它，也許其他人也會這樣做。

我遇到了同樣的問題，並且只是通過在ngOnInit上進行connect並在視圖中使用另一個observable來設法做到這一點（我只把我改變的東西）：

export class TableOverviewExample implements OnInit {
  obs: Observable<any>;
  ...

  ngOnInit(): void {
    ...
    this.obs = this.dataSource.connect();
  }
}

並在視圖中：

<div *ngFor="let row of obs | async" >

你可能不得不手動斷開數據源的連接，我還沒有驗證過...我剛剛做了：

ngOnDestroy(): void {
  if (this.dataSource) { this.dataSource.disconnect(); }
}