Как отобразить максимум 5 карт в каждом ряду в угловом материале в NgFor Loop - PullRequest
Новая
       29

Как отобразить максимум 5 карт в каждом ряду в угловом материале в NgFor Loop

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

Я получаю около 1000 контактов массива из API. Я хочу отобразить его в карточке контакта.Тем не менее, я просто хочу отображать максимум 5 карточек контактов в каждой строке.Кроме того, я хочу, чтобы для этого понадобилась нумерация страниц, как угловой материал.

 <div class="col" *ngFor="let yuvak of unAssignedYuvaks | paginate: { itemsPerPage: 30, currentPage: p }">
                  <mat-card class="example-card mt-2">
                      <mat-card-header>
                        <mat-card-title> {{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}} </mat-card-title>
                        <mat-card-subtitle> <i class="i-contact nb-phone"></i>{{yuvak.cnt_mobile_no}}</mat-card-subtitle>
                        <mat-card-subtitle> <fa-icon [icon]="faAt"></fa-icon> {{yuvak.email}}</mat-card-subtitle>
                      </mat-card-header>
                      <img mat-card-image src="{{thumbnailImg}}{{yuvak.profile_picture}}" alt="Photo of a {{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}}">
                      <mat-card-content>
                      </mat-card-content>
                      <mat-card-actions>
                        <button mat-button></button>
                        <button mat-button></button>
                      </mat-card-actions>
                    </mat-card>
              </div>

это моя карта div.Мне нужно что-то вроде это

1 Ответ

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

Попробуйте:

Component.html: 

<div style="display:flex">
    <mat-card class="mt-2" *ngFor="let item of tempList">
        <mat-card-header>
            <mat-card-title> {{item.title}} </mat-card-title>
        </mat-card-header>
    </mat-card>
</div>

<mat-paginator [length]="list.length" [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25, 100]" (page)="onPageChange($event)">
</mat-paginator>

Component.ts: 

import { Component } from '@angular/core';

@Component({
  selector: 'paginator-overview-example',
  templateUrl: 'paginator-overview-example.html',
  styleUrls: ['paginator-overview-example.css'],
})
export class PaginatorOverviewExample {

  list = [];
  pageSize=5;
  tempList=[];

  ngOnInit() {
  // get your list from api
    for (let i = 1; i < 1000; i++) {
      this.list.push({
        title:"item " + i
      });
    }

    this.tempList=this.list.slice(0,this.pageSize);
  }

  onPageChange(e) {
      this.tempList = this.list.slice(e.pageIndex * e.pageSize,(e.pageIndex + 1) *e.pageSize);
  }

}

Надеюсь, это поможет вам.

...