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

Question

我从确切的示例＆＃34;数据表开始，包括排序，分页和过滤。＆＃34;这里https://material.angular.io/components/table/examples 它工作正常。 但是现在我想在没有表的情况下使用paginator，所以我在html文件中替换了＃34;＆lt; mat-table ...＆lt; /垫表＆gt;＆＃34;简单地说：

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

但它似乎并不正常，因为它似乎：

• connect（）在启动时运行多次
• 只是悬停分页箭头使其再次运行
• 在过滤器中输入一个字母执行相同的操作

我想这不是正确的方法。

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

TIA提供任何帮助。

JP

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

只需将箭头悬停，然后点击，即可看到许多renderData。

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

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

Answer 1

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

我遇到了同样的问题，并且只需在connect上执行ngOnInit并在视图中使用另一个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(); }
}