Как добавить мат-пагинатор для мат-карт? - PullRequest
Новая
       23

Как добавить мат-пагинатор для мат-карт?

0 голосов
/ 25 января 2019

Я новичок в Angular и ищу пагинацию на мат-картах.Примеры, которые я видел, имеют только нумерацию таблиц.

У меня есть сотни кодов, и я хотел бы ограничить его до 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 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;
    });  
    }
  }

При необходимости я добавлю свой код в stackblitz.

1 Ответ

0 голосов
/ 25 января 2019

Этот ответ суммирует ключевые моменты о том, как заставить mat-paginator работать без mat-table.Ниже приведены подробные изменения, которые вам или кому-либо еще нужно внести, чтобы использовать 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 здесь .

...