Angular 8使用jw-pagination组件报错：无法绑定'item'属性

你遇到的NG8002: Can't bind to 'item' since it isn't a known property of 'jw-pagination'错误，主要有两个核心原因，我来一步步帮你搞定：

1. 用错了组件的输入属性名 #

jw-angular-pagination组件的正确输入属性是items（复数形式），而不是你写的item（单数）。组件本身没有定义名为item的输入项，所以Angular会直接抛出这个属性不存在的错误。

2. 绑定了错误的数据源 #

你模板里绑定的item是表格循环中单个课程对象（也就是<tr *ngFor="let item of courseList; index as ind">里的局部变量item），而不是你要分页的完整数据集（比如组件里的courseList或者测试用的items数组）。

完整修正步骤： #

步骤一：修正分页组件的绑定代码

打开home.component.html，把分页组件的代码从：

<jw-pagination [item]="item" (changePage)="onChangePage($event)"></jw-pagination>

改成（如果你要分页课程列表courseList）：

<jw-pagination [items]="courseList" (changePage)="onChangePage($event)"></jw-pagination>

要是你想测试组件自带的示例数据（就是ngOnInit里创建的150条测试数组），就改成：

<jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>

步骤二：更新表格的循环数据源

分页组件会通过changePage事件返回当前页的切片数据，所以你需要把表格的循环对象从courseList改成pageOfItems，这样页面才会动态显示当前页的内容：

<tr *ngFor="let item of pageOfItems; index as ind">

步骤三：初始化分页变量（可选但推荐）

为了避免pageOfItems初始化为undefined导致的模板报错，你可以在组件里给它一个初始空数组：

pageOfItems: Array<any> = [];

修正后的关键代码片段 #

home.component.html表格部分：

<tbody>
  <tr *ngFor="let item of pageOfItems; index as ind">
    <th scope="row">{{ind + 1}}</th>
    <td scope="row">{{item.courseName}}</td>
    <td scope="row">{{item.trainer}}</td>
    <td scope="row">{{item.category}}</td>
    <td>
      <button class="btn btn-info" (click)="enroll(item)">Enroll</button>
    </td>
    <td>
      <button class="btn btn-success" (click)="detail(item)">Detail</button>
    </td>
  </tr>
</tbody>

home.component.html分页组件部分：

<div class="card-footer pb-0 pt-3">
  <jw-pagination [items]="courseList" (changePage)="onChangePage($event)"></jw-pagination>
</div>

你的AppModule里已经正确导入并声明了JwPaginationComponent，这部分完全没问题，不需要修改。

这样调整后，分页组件就能正常工作，那个讨厌的错误也会消失啦~

内容的提问来源于stack exchange，提问作者Karthikeyan