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

我从“具有排序、分页和筛选功能的数据表”的确切示例开始 它很好用。 但是现在我想使用不带表的分页器，所以我在html文件“”中简单地替换为：

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

{{row.id}{{row.name}{{{row.progress}{{row.color}}

但它并不奏效，因为它似乎：

• connect（）在启动时运行多次
• 只需将paginator箭头悬停即可使其再次运行多次
• 在过滤器中输入一个字母也可以这样做

我想这不是正确的方法

最后，我想用同样的方法来显示卡片，包括过滤和分页

谢谢你的帮助

太平绅士

---

我把代码放在这里： 我添加了一些console.log来显示发生了什么（不是在stackblitz上），但下面是一个示例：

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

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

---

我从zero-one paginator中重新创建了一个带有迷你fab按钮的分页器，灵感来源于中的一些代码，添加了几个过滤器，效果很好：）

---

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

我也面临同样的问题，只需在

ngOnInit

中执行

connect

，并在视图中使用另一个可观察对象（我只放了我更改的东西）：

---

dataSource.connect（）在做什么？你能分享编辑链接吗？这里更好：@JPMous这里有一个小问题，在我按搜索字段过滤掉列表后，分页器仍然显示数据的大小，初始设置为50。它应该显示过滤数据的大小。我希望这是一个简单的解决办法！这里的

dataSource

是什么？@SamarthSaxena它是作为数据源发送到MatTable的数据

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