ng2-Angular 2 中的分页答案

【问题标题】：ng2-Pagination in Angular 2ng2-Angular 2 中的分页
【发布时间】：2017-10-23 15:21:23
【问题描述】：

我正在关注有关如何在 angular 2 中实现 ng2-pagination 的文档。下面是我的代码。但是，我在终端中出现了一些错误。我可能做错了什么？我的角度版本是 2.3.0

table.html

  <tr>

    <th>Country</th>
    <th>Continent</th>
</tr>

  <tbody>
    <tr *ngFor="let key of Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >
      <td>{{i + 1}}</td>
      <td>{{Country[key].name}}</td>
      <td>{{Country[key].continent}}</td>

     </tr>

  </tbody>

</table>
<div class="has-text-centered">
    <pagination-controls (pageChange)="page = $event"></pagination-controls>
</div>

组件

 Component({

        changeDetection: ChangeDetectionStrategy.OnPush



    })


    export class CountryComponent {

        @Input('data') Country:string[] =[];
        page: number = 1;

        //store incoming data

        Country: Country[] = [];
constructor(private httpService: HttpService, private router: Router) {



        this.httpService.getCountry()
            .subscribe(data => {
                    this.Country = data;
                }
            );

    }

错误

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForPaginate' since it isn't a known property of 'tr'. ("

  <tbody>
    <tr [ERROR ->]*ngFor="let key of Country | keys  paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >"): CountryComponent@92:8
Property binding ngForPaginate not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

【问题讨论】：

可能是它不喜欢那里的keys 管道？尝试使用一些不需要该管道的虚拟数据，看看是否有效。我使用了相同的分页，我真的没有看到任何其他明显会导致该错误的东西？这只是一个疯狂的猜测，值得一试，但我真的不明白为什么这很重要，但是....
没有钥匙，它与应用程序完美配合
嗯......那么显然它不适用于另一个管道，这当然不好。并且您的密钥管道可以在没有分页的情况下正常工作？如果是这样的话，也许会在 github 项目中提出问题？我认为没有人可以真正提供帮助，如果是因为 keys 管道无法正常工作...您需要尝试另一个软件包或更改您的 Country 以不需要管道...不是 muvch我可以说更多，对不起:(
还有其他的分页包可以试试吗？
我不能说，没试过其他的。我想你只需要向谷歌询问这个答案。 “Angular 2 pagination”搜索词给出了一些建议……

标签： angular pagination

【解决方案1】：

1.npm install ng2-pagination --save

2.import {Ng2PaginationModule} from 'ng2-pagination'; //将 ng2-pagination 导入到你的 app.module.ts 文件中

@NgModule({ 进口：[Ng2PaginationModule]

<tr>

    <th>Country</th>
    <th>Continent</th>
</tr>

  <tbody>
    <tr *ngFor="let key of Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >
      <td>{{i + 1}}</td>
      <td>{{Country[key].name}}</td>
      <td>{{Country[key].continent}}</td>

     </tr>

  </tbody>

</table>
<pagination-controls (pageChange)="page = $event" id="1"
                      maxSize="5"
                      directionLinks="true"
                     >
                </pagination-controls>

【讨论】：

【解决方案2】：

&lt;tr *ngFor="let key of (Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}); let i = index" &gt;

【讨论】：