我正在尝试按此链接中的说明向我的Angular应用程序添加分页:
我这样做了:
在 app.module.ts 中:
import { PaginationModule } from 'ngx-bootstrap/pagination';
@NgModule({
imports: [
@NgModule({
]
})
在 app.component.html 中:
<div class="container">
<div class="row">
<div class="row">
<div class="col-xs-12 col-12">
<div class="content-wrapper">
<p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
</div>
<pagination [totalItems]="contentArray.length" (pageChanged)="pageChanged($event)"></pagination>
</div>
</div>
</div>
</div>
在 app.component.ts 中:
import { Component, OnInit, Injectable } from '@angular/core';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
@Injectable({
providedIn: 'root'
})
export class AppComponent implements OnInit {
contentArray = new Array(90).fill('');
returnedArray: string[];
ngOnInit(): void {
this.contentArray = this.contentArray.map((v: string, i: number)
=> `Content line ${i + 1}`);
this.returnedArray = this.contentArray.slice(0, 10);
}
pageChanged(event: PageChangedEvent): void {
const startItem = (event.page - 1) * event.itemsPerPage;
const endItem = event.page * event.itemsPerPage;
this.returnedArray = this.contentArray.slice(startItem, endItem);
}
}
但是当我编译时,出现以下错误:
core.js:15724错误错误:未捕获(已承诺):错误:StaticInjectorError(RootModule)[PaginationComponent-> PaginationConfig]: StaticInjectorError(平台:核心)[PaginationComponent-> PaginationConfig]: NullInjectorError:没有用于PaginationConfig的提供程序! 错误:StaticInjectorError(RootModule)[PaginationComponent-> PaginationConfig]: StaticInjectorError(平台:核心)[PaginationComponent-> PaginationConfig]: NullInjectorError:没有用于PaginationConfig的提供程序! 在NullInjector.push ../ node_modules/@angular/core/fesm5/core.js.NullInjector.get(core.js:8896) 在resolveToken(core.js:9141) 在tryResolveToken(core.js:9085)
有什么问题的主意吗?
答案 0 :(得分:1)
应该是这个权利吗?
import { PaginationModule } from 'ngx-bootstrap';
@NgModule({
imports: [PaginationModule.forRoot(),...]
})