【问题标题】:Error: StaticInjectorError(AppModule)[PaginationComponent -> PaginationConfig]错误:StaticInjectorError(AppModule)[PaginationComponent -> PaginationConfig]
【发布时间】:2023-03-31 16:11:01
【问题描述】:

我正在尝试向我的 Angular 应用程序添加分页,如此链接中所述:

Go to "Content switching"

我这样做了:

在 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 ERROR 错误:未捕获(承诺中):错误: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)

有什么问题吗?

【问题讨论】:

    标签: javascript node.js angular typescript ecmascript-6


    【解决方案1】:

    应该是这样吧?

    import { PaginationModule } from 'ngx-bootstrap';
    
    @NgModule({
      imports: [PaginationModule.forRoot(),...]
    })
    

    【讨论】:

    • 就是这样...刚刚找到解决方案一秒钟。为什么有时需要添加 forRoot()?抱歉这个问题... Angular 的新手...
    • 当您使用 forRoot() 时,它将是应用范围内的
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-05-24
    • 2018-08-18
    • 2018-12-18
    • 1970-01-01
    • 2020-05-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多