Question

我正在尝试将分页与角度...结合起来

这是我的代码..

app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule } from '@angular/http';

    import { AppComponent }  from './app.component';

    import { PagerService } from './_services/pager.service';

    @NgModule({
        imports: [
            BrowserModule,
            HttpModule
        ],
        declarations: [
            AppComponent
        ],
        providers: [
            PagerService
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

app.components.ts

    import { Component, OnInit } from '@angular/core';
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import { map } from 'rxjs/operators';
    import 'rxjs/add/operator/map'
    import { PagerService } from './_services/index'


    @Component({
        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) {
            // 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);
        }
    }

pager.service.ts

    export class PagerService {
        getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
            // calculate total pages
            let totalPages = Math.ceil(totalItems / pageSize);

            // ensure current page isn't out of range
            if (currentPage < 1) {
                currentPage = 1;
            } else if (currentPage > totalPages) {
                currentPage = totalPages;
            }

            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 = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);

            // 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
            };
        }
    }

app.component.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>
        <hr />
        <div class="credits text-center">
            <p>
                <a href="http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google" target="_top">Angular 2 - Pagination Example with logic like Google</a>
            </p>
            <p>
                <a href="http://jasonwatmore.com" target="_top">JasonWatmore.com</a>
            </p>
        </div>
    </div>

我遇到了错误。说“ ng-component”与任何元素都不匹配

但是我在这里没有使用任何选择器。

我正在htmlUrl中使用HTML文件

请查看我的代码。

Answer 1

使用角度项目选择器的index.html加载AppComponent。

因此，在您的app.component.ts中，进行以下更改：

...
@Component({
    selector: 'my-app'
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {...}

如果index.html中使用了其他选择器，则请在app.component.ts中使用相同的选择器。

AppComponent_Host.ngfactory.js？ [sm]：1错误错误：选择器“ ng-component”与任何元素都不匹配

1 个答案: