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

我从确切的示例“具有排序、分页和过滤的数据表”开始。这里https://material.angular.io/components/table/examples效果很好。 但现在我想使用没有表格的分页器，所以我在 html 文件“”中简单地替换为：

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

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

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

我想这不是正确的方法。

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

TIA 寻求帮助。

JP

I put the code here : https://angular-6q44a4.stackblitz.io I added some console.log to show what happens (not on stackblitz) but here is an example :

只需将鼠标悬停在箭头上然后单击，就会看到许多渲染数据。

Whereas same code but with a table, it works as expected :

I recreated from zero one paginator with mini-fab buttons, inspired with some code from http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google , added several filters and it works fine :)

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

我面临着同样的问题，并设法通过简单地做到这一点connect in on ngOnInit并在视图中使用另一个可观察的内容（我只放置我更改的内容）：

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