如何为 mat-cards 添加 mat-paginator？

Posted 2023-03-10

【中文标题】如何为 mat-cards 添加 mat-paginator？

【英文标题】：How to add mat-paginator for mat-cards?

【发布时间】：2019-06-19 09:34:43

【问题描述】：

我是 Angular 的新手，我正在寻找 mat-cards 上的分页。我见过的例子只有表格的分页。

我有数百个代码，希望将其限制为每页 8-10 张卡片。如何实现这一目标？ 这是我的html和ts代码。

.html 文件

<div  class="flip-right" [ngClass]="mobileQuery.matches ? 'card-wrapper-mobile' : 'card-wrapper'" *ngFor="let items of datasource">
   <div class="card">
      <div class="front">
          <mat-card [ngClass]="mobileQuery.matches ? 'mobile-card' : 'desktop-card'">
                    <a routerLink="/viewPage">
                      <mat-card-header class="header">
                          <mat-card-title>items.name <mat-icon class="verified title" [inline]="true" >lock</mat-icon></mat-card-title>
                        </mat-card-header>
                            <mat-card-subtitle class="first-subtitle">Last updated on:items.Last_updated_on</mat-card-subtitle>
                            <mat-card-subtitle>Last updated by:items.Last_updated_by</mat-card-subtitle>
                        <mat-card-subtitle>items.created_by</mat-card-subtitle>

                    </a>
            </mat-card>
  </div>
  <div class="back">
      <mat-card [ngClass]="mobileQuery.matches ? 'mobile-card' : 'desktop-card'">
                <a routerLink="/viewPage">
                  <mat-card-header>
                      <mat-card-title>items.name<mat-icon class="verified" [inline]="true" >lock</mat-icon></mat-card-title>
                    </mat-card-header>

                </a>
        </mat-card>
      </div>
     </div>
    </div>

.ts 文件

  import  Component, OnInit,ViewChild  from '@angular/core';
  import  Subscription  from 'rxjs';
  import  CardsInfoService  from '../cards-info.service';
  import MediaMatcher from '@angular/cdk/layout';
  import ChangeDetectorRef, OnDestroy from '@angular/core';


  @Component(
  selector: 'app-private',
  templateUrl: './private.component.html',
  styleUrls: ['./private.component.scss']
  )
  export class PrivateComponent implements OnInit,OnDestroy 
  datasource=[];
  subscription: Subscription;
  mobileQuery: MediaQueryList;

  private _mobileQueryListener: () => void;

  constructor( media: MediaMatcher,
  changeDetectorRef: ChangeDetectorRef,
  private cardsInfo :CardsInfoService)  

  this.mobileQuery = media.matchMedia('(max-width: 600px)');
  this._mobileQueryListener = () => changeDetectorRef.detectChanges();
  this.mobileQuery.addListener(this._mobileQueryListener);
  

  ngOnDestroy(): void 
  this.mobileQuery.removeListener(this._mobileQueryListener);
  
  ngOnInit()
   this.cardsInfo.getCardsInfo()
   .subscribe(
    data => 
    this.datasource = data;
    );  
    
  

如果需要，我会将我的代码添加到 stackblitz 中。

【参考方案1】：

This 回答总结了如何在没有mat-table 的情况下使mat-paginator 工作的关键点。以下是您或其他任何人在将 mat-paginator 与其他元素/组件一起使用时需要进行的详细更改。

您需要在模板底部添加mat-paginator，如下所示：

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

然后在您的组件中使用ViewChild 访问它：

@ViewChild(MatPaginator) paginator: MatPaginator;

将其链接到ngOnInit 中的数据源：

this.dataSource.paginator = this.paginator;

并重写您绑定数据源的方式：

obs: Observable<any>;
// Card is whatever type you use for your datasource, DATA is your data
dataSource: MatTableDataSource<Card> = new MatTableDataSource<Card>(DATA);

ngOnInit() 
  this.obs = this.dataSource.connect();

然后像这样在模板中使用数据源：

<mat-card *ngFor="let card of obs | async">
  <!-- display your data here -->
</mat-card>

可以找到 mat-card 和 mat-paginator 的工作 stackblitz here.

【讨论】：

不错且清晰的答案！为什么this.changeDetectorRef.detectChanges() 被ngOnInit() 调用？

是为了防止出现错误信息ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.。请参阅this 帖子以获取有关为什么会发生这种情况以及如何解决它的更多信息（stackblitz 中显示的一种方法是自己触发更改检测，例如通过detectChanges() 手动触发）。

感激不尽！这正是我想要的。