如何在divs HTML Angular 2中创建一个简单的分页/轮播

Question

嗨，我的模板中有一个 *ngFor，它创建了 n 个div。

<div *ngFor="let item of widgets" class="page-content widget-item">
  <div>{{content}} </div>
</div>

如何在我的div 上添加一个简单的分页？这样我的第一页将有 10 个div，单击按钮时，页面会滑动并显示其余的div？知道吗？提前谢谢。

Answer 1

你需要创建一个这样的服务：

import * as _ from 'underscore';
export class PagerService {
getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) 
{
    // calculate total pages
    let totalPages = Math.ceil(totalItems / pageSize);
    let startPage: number, endPage: number;
    if (totalPages <= 10) {
        // less than 10 total pages so show all
        startPage = 1;
        endPage = totalPages;
    } else {
        // more than 10 total pages so calculate start and end pages
        if (currentPage <= 6) {
            startPage = 1;
            endPage = 10;
        } else if (currentPage + 4 >= totalPages) {
            startPage = totalPages - 9;
            endPage = totalPages;
        } else {
            startPage = currentPage - 5;
            endPage = currentPage + 4;
        }
    }
    // calculate start and end item indexes
    let startIndex = (currentPage - 1) * pageSize;
    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
    // create an array of pages to ng-repeat in the pager control
    let pages = _.range(startPage, endPage + 1);
    // return object with all pager properties required by the view
    return {
        totalItems: totalItems,
        currentPage: currentPage,
        pageSize: pageSize,
        totalPages: totalPages,
        startPage: startPage,
        endPage: endPage,
        startIndex: startIndex,
        endIndex: endIndex,
        pages: pages
    };
   }
}

并更改您的组件，如下所示：

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
import * as _ from 'underscore';
import { PagerService } from './_services/index'
@Component({
  moduleId: module.id,
   selector: 'app',
   templateUrl: 'app.component.html'
 })
export class AppComponent implements OnInit {
constructor(private http: Http, private pagerService: PagerService) { }
// array of all items to be paged
private allItems: any[];
// pager object
pager: any = {};
// paged items
pagedItems: any[];
ngOnInit() {
    // get dummy data
    this.http.get('./dummy-data.json')
        .map((response: Response) => response.json())
        .subscribe(data => {
            // set items to json response
            this.allItems = data;
            // initialize to page 1
            this.setPage(1);
        });
}
setPage(page: number) {
    if (page < 1 || page > this.pager.totalPages) {
        return;
    }
    // get pager object from service
    this.pager = this.pagerService.getPager(this.allItems.length, page);
    // get current page of items
    this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
}
}

你的HTML应该是这样的：

<div>
<div class="container">
    <div class="text-center">
        <h1>Angular 2 - Pagination Example with logic like Google</h1>
        <!-- items being paged -->
        <div *ngFor="let item of pagedItems">{{item.name}}</div>
        <!-- pager -->
        <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(1)">First</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === 1}">
                <a (click)="setPage(pager.currentPage - 1)">Previous</a>
            </li>
            <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                <a (click)="setPage(page)">{{page}}</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.currentPage + 1)">Next</a>
            </li>
            <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                <a (click)="setPage(pager.totalPages)">Last</a>
            </li>
        </ul>
    </div>
</div>
</div>

你可以在这里看到一个例子：

https://plnkr.co/edit/vPXf2U?p=preview

Answer 2

此链接可能有益于您的需求

http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google