添加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/localalize包添加到你的packages.json中:

npm install @angular/localize --save

将其添加到polyfills.ts:

import '@angular/localize/init';

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