如何在 Angular 7 的表格上使用 Ngx 分页

Posted 2023-03-29

【中文标题】如何在 Angular 7 的表格上使用 Ngx 分页

【英文标题】：How to use Ngx-pagination on table in angular 7

【发布时间】：2020-04-06 12:57:39

【问题描述】：

您好，我有一个类似的列表，

[…, …, …]

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="namei">
        </td>
        <td><input matInput type="text" [(ngModel)]="students[i].age" name="agei"></td> 
        <td>
            <mat-select [(ngModel)]="students[i].hobbies" name="hobbiesi" 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 页，但首先记录在每一页中重复。

我把https://www.freakyjolly.com/angular-7-6-pagination-implement-local-or-server-pagination-in-3-steps/作为分页参考。

还有https://***.com/a/48293486/9493078 还有。

【参考方案1】：

将学生[i]替换为学生

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

【讨论】：

感谢您的回答。它奏效了。但是我能知道是什么错误吗？

let student of students 已经将students 中的每个项目作为对象提供。这里不涉及索引。

@Ininiv 在我没有分页的情况下创建整个表格之前。当时 students[i].name 和 students[i].age 工作正常。但是当分页到达时，这个错误来了。什么是原因？

i 将保存索引值，即 0-4。 students[0] 将始终打印您的第一个对象。对来自学生的管道返回值进行分页，但学生保持不变

看来@Ininiv 已经回答了你的问题，只是为了你的理解，学生的学生代表数组的对象，你不需要[i]。 ngFor 将充当列表的中继器，以显示列表的可迭代对象。更多信息请参考angular.io/guide/…。