添加 ngb-pagination 不会加载页面

Question

https://ng-bootstrap.github.io/#/components/pagination/overview 中有关 ngb-pagination 的文档导致添加此后页面无法加载

<ngb-pagination
  [(page)]="page"
  [pageSize]="pageSize"
  [collectionSize]="items.length"></ngb-pagination>

这是我的 HTML 文件

    <div class="body d-flex ">
        <table class="table table-hover ">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Age</th>
                    <th scope="col">Email</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of users | slice: (page-1) * pageSize : page * pageSize">
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.email}}</td>
                    <td>action</td>
                </tr>
            </tbody>
        </table>
        <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="users.length"></ngb-pagination>
    </div>

这是 ts 文件


    import { Component, OnInit } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { environment } from 'src/environments/environment';

    @Component({
      selector: 'app-table',
      templateUrl: './table.component.html',
      styleUrls: ['./table.component.scss'],
    })
    export class TableComponent implements OnInit {
      readonly API_PATH = '/user/all';

      users: any[] = [];
      page = 1;
      pageSize = 5;

      constructor(private api: HttpClient) {}

      async ngOnInit() {
        this.displayAllUsers();
      }

      private async displayAllUsers() {
        var users: any = await this.getUsers();
        this.getResult(users);
      }

      private async getUsers(): Promise<any> {
        return await this.api.get(environment.API_URL + this.API_PATH).toPromise();
      }

      private getResult(result: any) {
        if (result.success) {
          this.users = this.toArray(result.data);
        } else {
          console.log(result.data);
        }
      }

      private toArray(result: any): any[] {
        var list = [];
        for (var items in result) {
          list.push(result[items]);
        }

        return list;
      }
    }

如果我删除 ngb-pagination 代码段，页面似乎可以完美加载，但添加代码段将无法加载页面

Answer 1

将@angular/localize 包添加到您的 packages.json:

npm install @angular/localize --save

将此添加到您的 polyfills.ts：

import '@angular/localize/init';

这对我有用，当我从 Angular 6 升级到 12 和 ng-bootstrap 10 后遇到同样的问题时。

添加 ngb-pagination 不会加载页面

adding ngb-pagination will not load the page

html

node.js

typescript

ng-bootstrap

angular