尝试在没有桌子的情况下使用有角度的材料分页器 [英] trying to use angular material paginator without a table

问题描述

<小时>

我从确切的示例具有排序、分页和过滤功能的数据表"开始.这里

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

虽然代码相同但带有表格，但它按预期工作:

<小时>

我用 mini-fab 按钮从零一个分页器重新创建，灵感来自

解决方案

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

我遇到了同样的问题，并设法通过在 ngOnInit 上执行 connect 并在视图中使用另一个 observable(我只把东西放在我改变了):

导出类 TableOverviewExample 实现 OnInit {obs: Observable;...ngOnInit(): 无效 {...this.obs = this.dataSource.connect();}}

并在视图中:

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

您可能必须手动断开数据源，我还没有验证过...我刚刚在:

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

---

I started with the exact example "Data table with sorting, pagination, and filtering." here https://material.angular.io/components/table/examples It works fine. But now I'd like to use the paginator without the table, so I replaced in html file "< mat-table ... < /mat-table>" simply by :

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

But it does not work fine as it appears that :

• connect() is run many times at startup
• just hovering paginator arrow makes it run many times again
• inputing one letter in the filter do the same

I guess this is not the right way.

At the end I would like to reuse same method to display cards, with filtering and paginator.

TIA for any help.

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 :

Just hovering the arrow then click, many renderedData seen.

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 :)

解决方案

You probably already managed to work around that issue but, since I was looking for that, and probably others will too.

I was facing the same problem, and manage to do it simply by doing the connect in on ngOnInit and using another observable in the view (I only put the thing i changed):

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

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

and in the View:

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

You will probably have to manually disconect the datasource, I have not validated that... I just did in:

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

这篇关于尝试在没有桌子的情况下使用有角度的材料分页器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！