在 Angular 4 中进行分页时出现错误

Question

我是 Angular 4 的新手。我正在使用 Angular 4 进行分页。我安装了“npm install ngx-pagination --save”。我按照互联网上的说明进行操作。但我收到类似“无法找到管道‘分页’的错误（”]game of games | paginate: { itemsPerPage: 2, currentPage: p }"> {{i}} ”）：ng:///ActivityChartModule /ActivityComponent.html@235:32 'pagination-controls' 不是已知元素：“。我尝试了更多。任何人都可以帮助我解决这个问题。下面是我的代码，

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 install 后重新启动项目。尝试 ctrl+c 和 ngserve 重新启动它。