laixiangran/e-ngx-pagination

基于Angular的分页组件

e-ngx-pagination's Issues

Template prase error

Hi,

I followed the installation method and getting following error on console.

zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'totalItems' since it isn't a known property of 'essence-ng2-pagination'.

1. If 'essence-ng2-pagination' is an Angular component and it has 'totalItems' input, then verify that it is part of this module.
2. If 'essence-ng2-pagination' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

Can't bind to 'itemsPerPage' since it isn't a known property of 'essence-ng2-pager'.

1. If 'essence-ng2-pager' is an Angular component and it has 'itemsPerPage' input, then verify that it is part of this module.
2. If 'essence-ng2-pager' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.

This is my component file.

`import {Component, NgModule} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Http} from '@angular/http';
import {MakeCall} from './make-call';
import {ExponentialStrengthPipe} from './QuizScoresPipe';
import { EssenceNg2PaginationModule } from "essence-ng2-pagination";

@component({
selector: 'left_content_section',
templateUrl: '../angtemplates/quizscores.html',
providers:[MakeCall],
})

@NgModule ({
declarations: [
ExponentialStrengthPipe
],
imports: [
EssenceNg2PaginationModule
]
})
// Component class
export class QuizScores {
targeturl = '';
public nodata = 1;
public resultset :any ;
public quizscores:any ;

public maxSize: number = 5;
public currentPage: number = 1;
public itemsPerPage: number = 20;
public totalItems: number = 200;

constructor(  public http: Http
            ,   public api: MakeCall
            ,	route: ActivatedRoute){
	this.loadView();
}

public pageChanged (event: any): void {
    console.log(event);
};

public loadView() {
this.targeturl = "/getquizscores";
this.api.getService(this.targeturl)
.then(data => {
this.resultset = data;
if(this.resultset.status == 0){
this.nodata =0;
}else{
this.quizscores = this.resultset;
}
},
error => {
console.log('Network error');
});
}
}
`

this is my module.ts

`///
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PathLocationStrategy, LocationStrategy, HashLocationStrategy } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.routes';
import { MyProfile } from './MyProfile';
import { MyCourses } from './MyCourses';
import { QuizScores } from './QuizScores';
import { ExponentialStrengthPipe } from './QuizScoresPipe';
import { CourseDetails } from './CourseDetails';
import { QuizDetails } from './QuizDetails';
import { VideoLesson } from './VideoLesson';
import { PptLesson } from './PptLesson';
import { HomeComponent } from './HomeComponent';
import { SideBarComponent } from './SideBarComponent';
import { CommentComponent } from './CommentComponent';
import { EssenceNg2PaginationModule } from "essence-ng2-pagination";

@NgModule({
declarations: [
AppComponent,
HomeComponent,
SideBarComponent,
MyProfile,
MyCourses,
QuizScores,
ExponentialStrengthPipe,
CourseDetails,
QuizDetails,
VideoLesson,
PptLesson,
CommentComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
EssenceNg2PaginationModule
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule { }

/*import {bootstrap} from '@angular/platform-browser-dynamic';
import {provide} from '@angular/core';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from '@angular/http';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import {
LocationStrategy,
HashLocationStrategy,
}
from '@angular/common';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
ROUTER_DIRECTIVES,
HTTP_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
*/
`

this is what I added on template

` <essence-ng2-pagination [totalItems]="totalItems"
[(ngModel)]="currentPage"
[maxSize]="maxSize"
[itemsPerPage]="itemsPerPage"
class="pagination-lg"
[boundaryLinks]="true"
[rotate]="false"
previousText="上一页"
nextText="下一页"
firstText="首页"
lastText="尾页"
(pageChanged)="pageChanged($event)">

        <essence-ng2-pager 	[totalItems]="totalItems"
                              [(ngModel)]="currentPage"
                              [itemsPerPage]="itemsPerPage"
                              class="pagination-lg"
                              previousText="上一页"
                              nextText="下一页"
                              (pageChanged)="pageChanged($event)">
        </essence-ng2-pager>`

Please help. I am very new to angularJS. Did I miss anything here ?