Question

我正在使用Meteor Angular 2教程。

client/imports/app/parties/parties-list.component.ts (6, 43): Module '"node_modules/ng2-pagination/index"' has no exported member 'PaginationControlsCmp'.
    client/imports/app/parties/parties-list.component.ts (72, 37): Argument of type '{ id: () => string; itemsPerPage: number; currentPage: number; totalItems: number; }' is not assignable to parameter of type 'PaginationInstance'.
      Types of property 'id' are incompatible.
        Type '() => string' is not assignable to type 'string'.
    client/imports/app/parties/parties-list.component.ts (86, 44): Argument of type '() => string' is not assignable to parameter of type 'string'.
    cl

回顾这些问题，我在github论坛上看到的一件事是一行：

import { PaginationService, PaginatePipe, PaginationControlsCmp } from 'ng2-pagination';

但我还没有能够做到这一点。我对此非常陌生，所以我试图将其追溯到问题所在的位置。我找到了以下内容：

EDITED

包括供参考的代码。

已安装：

meteor npm install ng2-pagination --save

进口：

import { Ng2PaginationModule } from 'ng2-pagination';

+┊  ┊11┊interface Pagination {
+┊  ┊12┊  limit: number;
+┊  ┊13┊  skip: number;
+┊  ┊14┊}
+┊  ┊15┊
+┊  ┊16┊interface Options extends Pagination {
+┊  ┊17┊  [key: string]: any
+┊  ┊18┊}

+┊  ┊36┊  constructor(
+┊  ┊37┊    private paginationService: PaginationService
+┊  ┊38┊  ) {}

+┊  ┊65┊    this.paginationService.register({
+┊  ┊66┊      id: this.paginationService.defaultId,
+┊  ┊67┊      itemsPerPage: 10,
+┊  ┊68┊      currentPage: 1,
+┊  ┊69┊      totalItems: 30,
+┊  ┊70┊    });

...

+┊  ┊52┊      this.paginationService.setCurrentPage(this.paginationService.defaultId, curPage as number);

最后是分页元素：

+┊  ┊17┊  <pagination-controls (pageChange)="onPageChanged($event)"></pagination-controls>
enter code here
I think I've done this all correctly, as per the tutorial, and altered as per the issues, but cannot get it working.

这就是我被困的地方:( 9月13日）

https://github.com/Urigo/meteor-angular2.0socially/blob/master/manuals/views/step13.md

Answer 1

我也在使用ngPagination，但我真的不理解你的导入。这可能会导致您的问题，因为您正在尝试导入不应该导入但不能导入的内容。您应该将其导入@NgModule，如下所示：

import { Ng2PaginationModule } from 'ng2-pagination';

并在imports中的@NgModule声明：

imports: [Ng2PaginationModule ...+ your other imports]

然后您可以在组件（html）中使用它，而无需向组件中导入任何内容，因为您已经在@NgModule中声明了它，例如：

<table>
    <tr *ngFor="let item of array | paginate: {itemsPerPage: 10, currentPage: p }">
        <td>{{item.value}}</td>
    </tr>
</table>

其中p是您选择的变量。

希望这有帮助！

编译流星项目

1 个答案: