web-dev-qa-db-ja.com

Angular 7：NullInjectorError：PagerServiceのプロバイダーがありません

ページネーションを実装しようとしていますが、機能していません。ここに私のコードがあります：

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：

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

私はこのエラーを受け取ります：

QuickWorkerListComponent_Host.ngfactory.js？ [sm]：1エラーエラー：StaticInjectorError（AppModule）[QuickWorkerListComponent-> PagerService]：StaticInjectorError（Platform：core）[QuickWorkerListComponent-> PagerService]：NullInjectorError：PagerServiceのプロバイダーがありません！ 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 resolveNgModuleDep（core.js：19784）の/core.js.NgModuleRef_.get（core.js：20473）

javascriptnode.jsangulartypescriptangular7
11
user10791322

エラーテキストに続いて、app.module.tsファイルのProvider部分にPagerServiceをインポートして追加する必要があります。

providers: [
    PagerService,
  ],

そして、Injectableとして宣言することを忘れないでください：

@Injectable()
export class PagerService {

   // ...

}
17
veben

エラーはPagerServiceに関連しています。アンダースコアではありません

NullInjectorError：PagerServiceのプロバイダーがありません！で

サービスがapp.moduleのプロバイダーのリストに登録されているか、上部にInjectable宣言があることを確認してください。

@Injectable({
  providedIn: 'root',
})

angular 7のサービスの一般的な例は次のとおりです。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService{

  constructor() { }

}

詳しくは ドキュメントを参照 をご覧ください。

9
nircraft

Page ServiceまたはJob Serviceの両方に、Injectable属性を適用するか、これらのサービスに何かを挿入するかどうかを確認する必要があります。その後、同じことが適用されます。

0
Vikram Jangra