尝试在没有桌子的情况下使用有角度的材料分页器

Question

---

我从确切的示例“具有排序、分页和过滤功能的数据表”开始。这里https://material.angular.io/components/table/examples 它工作正常。但是现在我想在没有表格的情况下使用分页器，所以我在 html 文件“< mat-table ... < /mat-table>”中简单地替换为：

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

但它不能正常工作，因为看起来：

• connect() 在启动时运行多次
• 只需悬停分页器箭头即可使其再次运行多次
• 在过滤器中输入一个字母做同样的事情

我想这不是正确的方法。

最后，我想重用相同的方法来显示卡片，带有过滤器和分页器。

TIA 寻求任何帮助。

J.P

---

我把代码放在这里：https : //angular-6q44a4.stackblitz.io 我添加了一些console.log来显示发生了什么（不是在stackblitz上）但这里是一个例子：

只需悬停箭头然后单击，就可以看到许多渲染数据。

而相同的代码但有一个表，它按预期工作：

---

我用 mini-fab 按钮从零一个分页器重新创建，灵感来自http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google 的一些代码，添加几个过滤器，它工作正常:)

Answer 1

您可能已经设法解决了这个问题，但是，因为我一直在寻找这个问题，可能其他人也会这样做。

connect我面临着同样的问题，并且只需通过执行in onngOnInit并在视图中使用另一个可观察的内容就可以做到这一点（我只放置我更改的内容）：

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