在angular 4中进行分页时出错

Question

我是angular 4的新手。我正在使用angular 4进行分页。我已经安装了"npm install ngx-pagination --save“。我按照互联网上的指示去做了。但我得到的错误像“无法找到管道‘分页’(”)游戏|分页：{ itemsPerPage: 2，currentPage: p }"> {{i}} ")：ng:///ActivityChartModule/ActivityComponent.html@235:32‘分页控制’不是一个已知的元素：“。我试过更多。谁能帮我从这个问题中走出来？下面是我的代码，

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

如果您已经将NgxPaginationModule导入到app.module.ts中，我认为这是因为您需要在安装npm后重新启动项目。尝试使用ctrl+c和ng serve重新启动它。

Answer 2

我已经解决了这个问题，你需要在你的module.ts中包含以下代码：

import {NgxPaginationModule} from 'ngx-pagination';

@NgModule({
    imports: [ NgxPaginationModule ]
})

Answer 3

您应该在angular-core中添加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/