Question

我正在尝试制作情节指南，并且每个情节都会显示在卡片上。共有25张卡，每页显示6张。我可以使用“下一个”和“上一个”按钮，但是需要使用一个分页系统对此进行改进，该系统每个屏幕显示6张卡片，您可以使用上一个，1、2、3等进行导航。

这是我到目前为止用于卡片的代码，但是我真的不明白如何使卡片和分页一起工作。

<div class="container" style="margin-top: 100px;" style="padding-bottom: 100px;"> 
     
        <div class = "row">
        <div class="col-sm-4" *ngFor = "let episode of webService.episode_list | async">
        <div class="card card-block width:10rems text-white bg-danger mb3 padding-bottom: 100px">
          
            <mat-tab-group animationDuration="750ms">
                <mat-tab label="Overview"> <img class="card-img-top" src="assets/logo.png"  alt="Card image cap">
                  <div class="card-body">
                    <h5 class="card-title">Episode: <br> {{episode.name}}</h5>
                    <p class="card-text">{{episode.summary}}<br></p>
                    <div> <button mat-raised-button colour="white" [routerLink]= "['/episodes', episode._id]">Critiques</button>
                    </div>
                  </div>   
                </mat-tab>
                <mat-tab label="More Info"> <div class="card-body">
                    <h5 class="card-title">Season:</h5><p>{{episode.season}}</p>
                    <h5 class="card-text">Episode:</h5><p>{{episode.number}}</p>
                      <h5 class="card-text">First Aired:</h5><p> {{episode.airdate}}</p>
                      <h5 class="card-text">Runtime (mins):</h5><p>{{episode.runtime}}</p>
                      <h5 class="card-text">Additional Link:</h5><p>{{episode.url}}</p>
                   
                    
            
                  </div>   
                </mat-tab>
                </mat-tab-group>

              </div>
            </div>

import {ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { WebService } from './web.service';


@Component({
 selector: 'episodes',
 templateUrl: './episodes.component.html',
 styleUrls: ['./episodes.component.css'],
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class EpisodesComponent { 
    constructor(private webService: WebService) {}
    
    episodeList: WebService["getEpisodes"];
    pagedList: WebService["getEpisodes"];
    breakpoint: number = 3; 
    length: number = 0;
    pageSize: number = 2;  //displaying three cards each row
    pageSizeOptions: number[] = [3, 6, 9, 12];
  
    @Input('data') episode:[];
    page: number = 1;

    ngOnInit() {
        if (sessionStorage.page) {
            this.page = sessionStorage.page;
            } 
        this.webService.getEpisodes(this.page);
        this.breakpoint = (window.innerWidth <= 800) ? 1 : 3;
        this.episodeList = this.webService.getEpisodes;
        this.length = this.episodeList.length;
     }

    nextPage() {
        this.page = Number(this.page) + 1;
        sessionStorage.page = Number(this.page);
        this.webService.getEpisodes(this.page);
       }

    previousPage() {
    if (this.page > 1) {
    this.page = Number(this.page) - 1;
    sessionStorage.page = Number(this.page);
    this.webService.getEpisodes(this.page);
    }
    }
    

    episode_list;

}

Answer 1

分页器的问题是您需要知道有多少个项目。如果您有两个变量

  length = 20;
  pageSize = 5;

您可以将| async和| slice一起使用（或者，如果获得所有值，请仅使用| slice）

<div *ngFor="let item of $values |async 
                |slice:((paginator.pageIndex)*pageSize):
                       ((paginator.pageIndex+1)*pageSize)">
  {{item}}
</div>
<mat-paginator #paginator [length]="length"
              [pageSize]="pageSize"
              (page)="pageEvent = $event">
</mat-paginator>

看看如何使用paginator.pageIndex-“ paginator”是变量引用-标签mat-paginator-）中的#paginator

请参见stackblitz

中的示例

注意：如果元素很少，则可以获取所有值并将其存储在变量中

this.dataService.getList().subscribe((res:any)=>{
   this.length=res.length;
   this.values=res;
})

然后迭代

<div *ngFor="let item of values|slice:((paginator.pageIndex)*pageSize):
                                      ((paginator.pageIndex+1)*pageSize)">

如何在Angular中对卡片进行分页？

1 个答案: