如何在 Angular 7 的表格上使用 Ngx-pagination

嗨，我有一个清单，例如，

[{…}、{…}、{…}]

0：{姓名：“Manu”，年龄：“21”，爱好：Array(4)}

1：{姓名：“Anu”，年龄：“20”，爱好：Array(3)}

2：{姓名：“nandu”，年龄：“22”，爱好：Array(5)}

我需要在表格上显示这一点。所以我正在执行下面的代码

<table id='studTable'>
<thead>
    <tr>
        <th style="text-align: center">Student Name </th>
        <th style="text-align: center">Age</th>
        <th style="text-align: center">Hobbies</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let student of students | paginate: { itemsPerPage: 10, currentPage: p } ; let i = index">
        <td>
            <input matInput [(ngModel)]="students[i].name" name="name{{i}}">
        </td>
        <td><input matInput type="text" [(ngModel)]="students[i].age" name="age{{i}}"></td> 
        <td>
            <mat-select [(ngModel)]="students[i].hobbies" name="hobbies{{i}}" multiple>
                <mat-option *ngFor="let hobbie of studHobbies" [value]="hobbie.studHobbie">
                    {{hobbie.studHobbie}}
                </mat-option>
            </mat-select>
        </td>
    </tr></tbody></table><pagination-controls (pageChange)="p = $event"></pagination-controls>

但是当我这样做时，我遇到了一个像这样的错误，

当我按分页上的下一页时，表格的第一行显示。但是要显示的项目数是正确的，即如果我有 5 个项目要显示，那么分页控制 div 将显示 5 页，但第一条记录是重复的在每一页中。

I took https://www.freakyjolly.com/angular-7-6-pagination-implement-local-or-server-pagination-in-3-steps/ https://www.freakyjolly.com/angular-7-6-pagination-implement-local-or-server-pagination-in-3-steps/供分页参考。

And https://stackoverflow.com/a/48293486/9493078 https://stackoverflow.com/a/48293486/9493078 Also.

将学生[i]替换为学生

<tr *ngFor="let student of students | paginate: { itemsPerPage: 10, currentPage: p } ; let i = index">
    <td>
        <input matInput [(ngModel)]="student.name" name="name{{i}}">
            </td>
    <td><input matInput type="text" [(ngModel)]="student.age" name="age{{i}}"></td>
    <td>
        <mat-select [(ngModel)]="student.hobbies" name="hobbies{{i}}" multiple>
            <mat-option *ngFor="let hobbie of studHobbies" [value]="hobbie.studHobbie">
                {{hobbie.studHobbie}}
            </mat-option>
        </mat-select>
    </td>
</tr>