如何为垫卡添加垫分页器?
[英] How to add mat-paginator for mat-cards?
本文介绍了如何为垫卡添加垫分页器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 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">上次更新时间:{{items.Last_updated_on}}</mat-card-subtitle><mat-card-subtitle>最后更新者:{{items.Last_updated_by}}</mat-card-subtitle><mat-card-subtitle>{{items.created_by}}</mat-card-subtitle></a></mat-card>
<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>
.ts 文件
import { Component, OnInit,ViewChild } from '@angular/core';从'rxjs'导入{订阅};从'../cards-info.service'导入{ CardsInfoService};从@angular/cdk/layout"导入 {MediaMatcher};从@angular/core"导入 {ChangeDetectorRef, OnDestroy};@成分({选择器:'app-private',templateUrl: './private.component.html',styleUrls: ['./private.component.scss']})导出类 PrivateComponent 实现 OnInit,OnDestroy {数据源=[];订阅:订阅;mobileQuery: MediaQueryList;私人 _mobileQueryListener: () =>空白;构造函数(媒体:MediaMatcher,changeDetectorRef: ChangeDetectorRef,私人卡信息:卡信息服务){this.mobileQuery = media.matchMedia('(max-width: 600px)');this._mobileQueryListener = () =>changeDetectorRef.detectChanges();this.mobileQuery.addListener(this._mobileQueryListener);}ngOnDestroy(): 无效 {this.mobileQuery.removeListener(this._mobileQueryListener);}ngOnInit(){this.cardsInfo.getCardsInfo().订阅(数据 =>{this.datasource = 数据;});}}
如果需要,我会在 stackblitz 中添加我的代码.
解决方案
这个答案总结了如何解决的关键点让 mat-paginator
在没有 mat-table
的情况下工作.以下是您或其他任何人在将 mat-paginator
与其他元素/组件一起使用时需要进行的详细更改.
您需要在模板底部添加一个 mat-paginator
,如下所示:
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
然后在您的组件中使用 ViewChild
访问它:
@ViewChild(MatPaginator) 分页器:MatPaginator;
在 ngOnInit
中将其链接到您的数据源:
this.dataSource.paginator = this.paginator;
并重写您绑定数据源的方式:
obs: Observable;//Card 是您用于数据源的任何类型,DATA 是您的数据数据源:MatTableDataSource<卡片>= new MatTableDataSource(DATA);ngOnInit() {this.obs = this.dataSource.connect();}
然后像这样使用模板中的数据源:
<!-- 在此处显示您的数据--></mat-card>
<块引用>
可以找到 mat-card
与 mat-paginator
的工作堆栈闪电战此处.
I'm new to Angular and I'm looking for pagination on mat-cards. The examples I've seen has only pagination for tables.
I have hundreds of code and would like to restrict it to 8-10 cards per page. How to acheive this?
This is my html and ts code.
.html file
<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 file
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;
});
}
}
I will add my code in stackblitz if needed.
解决方案
This answer sums up the key points on how to make mat-paginator
work without a mat-table
. Below are the detailed changes you or anyone else would need to make to use mat-paginator
with other elements/components.
You would need to add a mat-paginator
at the bottom of your template like this:
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
Then access it in your component with ViewChild
:
@ViewChild(MatPaginator) paginator: MatPaginator;
Link it to your datasource in ngOnInit
:
this.dataSource.paginator = this.paginator;
And rewrite how you bind your datasource:
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();
}
And then use the datasource in your template like this:
<mat-card *ngFor="let card of obs | async">
<!-- display your data here -->
</mat-card>
Working stackblitz for mat-card
with mat-paginator
can be found
here.
这篇关于如何为垫卡添加垫分页器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!