问如何按角度分页卡片？
EN

Stack Overflow用户

提问于 2019-12-18 11:39:17

回答 1查看 3.5K关注 0票数 3

我试图做一个插曲指南，每集都显示在一张卡片上。总共有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;

}

angular

回答 1

Stack Overflow用户

发布于 2019-12-18 12:10:27

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

  length = 20;
  pageSize = 5;

您可以一起使用\\、异步和\

<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的片-“分页器”是标记mat中的变量引用-the #分页器-)

参见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)">

更新我们可以有一个带有选择选项的分页器

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