Question

我是角色4的新手。我正在使用角度4进行分页。我安装了＆＃34; npm install ngx-pagination --save＆＃34;。我按照互联网上的说明进行操作。但我得到的错误就像＆＃34;管道＆＃39;分页＆＃39;无法找到（＆＃34; ]游戏游戏| paginate：{itemsPerPage：2，currentPage：p}＆＃34;＆gt; {{一世}} ＆＃34;）：ng：///ActivityChartModule/ActivityComponent.html@235：32 ＆＃39;分页的控件＆＃39;不是一个已知的元素：＆＃34;。我试过更多。任何人都可以帮我解决这个问题。以下是我的代码，

app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]

in component.ts
p: number = 1;


    games = [
        {
            "id": "1",
            "name": "DOTA 2",
            "genre": "Strategy"
        },
        {
            "id": "2",
            "name": "AOE 3",
            "genre": "Strategy"
        },
        {
            "id": "3",
            "name": "GTA 5",
            "genre": "RPG"
        },
        {
            "id": "4",
            "name": "Far Cry 3",
            "genre": "Action"
        },
        {
            "id": "5",
            "name": "GTA San Andreas",
            "genre": "RPG"
        },
        {
            "id": "6",
            "name": "Hitman",
            "genre": "Action"
        },
        {
            "id": "7",
            "name": "NFS MW",
            "genre": "Sport"
        }, {
            "id": "8",
            "name": "Fifa 16",
            "genre": "Sport"

        }, {
            "id": "9",
            "name": "NFS Sen 2",
            "genre": "Sport"

        }, {
            "id": "10",
            "name": "Witcher Assasins on King",
            "genre": "Adventure"
        }

    ];

in component.html
<div class="container">
    <div class="row">
        <nav class="navbar">
            <input class="form-control" type="text" name="search">
        </nav>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Genre</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
                    <td>{{i}}</td>
                    <td>{{game.name}}</td>
                    <td>{{game.genre}}</td>
                </tr>
            </tbody>
        </table>
        <div>
            <pagination-controls (pageChange)="p($event)"></pagination-controls>
        </div>
    </div>
</div>

Answer 1

我复制了您的代码，但没有遇到您遇到的错误。但是，使用的变量p实际上是一个事件而不是数字[]。

在app.component.html中替换table和pagination-control元素，如下所示：

 <table class="table">
      <thead>
          <tr>
              <th>#</th>
              <th>Name</th>
              <th>Genre</th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
              <td>{{game.id}}</td>
              <td>{{game.name}}</td>
              <td>{{game.genre}}</td>
          </tr>
      </tbody>
  </table>
  <div>
      <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </div>

此外，在app.component.ts中声明p不是必需的，因为它是在内部使用的paginationApi。

附注：您收到的错误表明未成功安装ngx-pagination。请检查您的项目的node_modules文件夹中是否已成功复制ngx-pagination文件夹。

演示：https://angular-ijtgcv.stackblitz.io

Answer 2

我已解决此问题，您需要在 module.ts 中添加以下代码：

long

Answer 3

您应该在角铁芯中添加CUSTOM_ELEMENTS_SCHEMA

和

方案：[CUSTOM_ELEMENTS_SCHEMA] ----将其添加到您的@NgModule（{}）

引用此链接：https://hassantariqblog.wordpress.com/2016/10/12/angular2-template-parse-errors-add-custom_elements_schema-to-the-ngmodule-schemas/

Answer 4

如果您已经将 NgxPaginationModule 导入app.module.ts，我认为这是因为您需要在npm安装之后重新启动项目。尝试按ctrl + c，然后按ng serve再次重新启动。

Answer 5

尝试改变“import {NgxPaginationModule} from 'ngx-pagination';”的顺序在 app.module.ts 对我有用

在角度4中进行分页时出错

5 个答案: