嗨，我有一个清单，例如，
[{…}、{…}、{…}]
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
