[英]Angular 7: NullInjectorError: No provider for PagerService
I am trying to implement pagination but It's not working.我正在尝试实现分页,但它不起作用。 Here is my code:
这是我的代码:
pager.service.ts: pager.service.ts:
import * as _ from 'underscore';
@Injectable({
providedIn: 'root',
})
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
};
}
}
quick-worker-list.component.ts:快速工人列表.component.ts:
import { JobService } from '@app/services';
import { PagerService } from './../../../services/pager.service';
import { Component, OnInit, Input } from '@angular/core';
import * as _ from 'underscore';
@Component({
selector: 'app-quick-worker-list',
templateUrl: './quick-worker-list.component.html',
styles: []
})
export class QuickWorkerListComponent implements OnInit {
S3ImageUrl: string;
// array of all items to be paged
private workerData: any[];
// pager object
pager: any = {};
// paged items
pagedItems: any[];
constructor(private pagerService: PagerService, private jobService: JobService) {
}
ngOnInit() {
this.jobService.getQuickJobWorkerList(1301, 1)
.map((response: Response) => response.json())
.subscribe(data => {
// set items to json response
this.workerData = 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);
}
}
I get this error:我收到此错误:
QuickWorkerListComponent_Host.ngfactory.js?
QuickWorkerListComponent_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[QuickWorkerListComponent -> PagerService]: StaticInjectorError(Platform: core)[QuickWorkerListComponent -> PagerService]: NullInjectorError: No provider for PagerService!
[sm]:1 ERROR 错误:StaticInjectorError(AppModule)[QuickWorkerListComponent -> PagerService]: StaticInjectorError(Platform: core)[QuickWorkerListComponent -> PagerService]: NullInjectorError: No provider for PagerService! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveNgModuleDep (core.js:19784) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473) at resolveNgModuleDep (core.js:19784)
在 NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector .push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveToken (core.js:3473) at tryResolveToken (core.js:3417) at StaticInjector.push ../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314) at resolveNgModuleDep (core.js:19784) at NgModuleRef_.push../node_modules/@angular/core/fesm5 /core.js.NgModuleRef_.get (core.js:20473) 在 resolveNgModuleDep (core.js:19784)
Following the error text, you have to import and add your PagerService
in the Provider part of your app.module.ts
file:继错误文本,您必须导入并添加
PagerService
在你的供应部件app.module.ts
文件:
providers: [
PagerService,
],
And don't forget to declare it as Injectable
:并且不要忘记将其声明为
Injectable
:
@Injectable()
export class PagerService {
// ...
}
Your error is related to PagerService
, not with the underscore您的错误与
PagerService
相关,与下划线PagerService
NullInjectorError: No provider for PagerService!
NullInjectorError: PagerService 没有提供程序! at
在
make sure your service is registered in list of providers at app.module or has the Injectable
declaration at top:确保您的服务已在 app.module 的提供商列表中注册或在顶部具有
Injectable
声明:
@Injectable({
providedIn: 'root',
})
a common example of service in angular 7 is below: angular 7 中的一个常见服务示例如下:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService{
constructor() { }
}
please refer to documentation for Services for more details.有关更多详细信息,请参阅服务文档。
Page Service 或 Job Service 都应该应用 Injectable 属性,或者检查您是否在这些服务中注入了某些内容,然后同样适用于该属性。
If you are using mono-repo:如果您使用的是单回购:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.