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

问题描述

我从确切的示例具有排序，分页和过滤的数据表"开始.此处 https://material.angular.io/components/table/examples 它工作正常. 但是现在我想使用不带表的分页器，因此我在html文件< mat-table ...</mat-table>"中替换为:

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()在启动时运行了很多次
• 只要悬停分页器箭头，它就会再次运行多次
• 在过滤器中输入一个字母也可以做到

我想这不是正确的方法.

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寻求帮助.

JP

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

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 :

只需将箭头悬停然后单击，即可看到许多renderedData.

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.

我也面临着同样的问题，并且通过在ngOnInit上执行connect并在视图中使用另一个可观察到的东西(我只放了我改变的东西)来设法做到这一点:

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

并在视图中:

<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屋！