问题描述
我有一个类似的列表,
0:{姓名:"Manu";年龄:"21";兴趣爱好:Array(4)}
0: {name: "Manu", age: "21", hobbies: Array(4)}
1:{姓名:"Anu",年龄:"20",兴趣爱好:Array(3)}
1: {name: "Anu", age: "20", hobbies: Array(3)}
2:{姓名:"nandu",年龄:"22",兴趣爱好:Array(5)}
2: {name: "nandu", age: "22", hobbies: Array(5)}
我需要在桌子上显示它.所以我在做下面的代码
I need to show this on a table.So i am doing the code below
<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>
但是当我这样做时,我遇到了类似的错误,
But When i doing this,I am getting a bug like ,
当我按分页的下一页时,表格的第一行显示.但是要显示的项目数是正确的,即如果我有5个项目要显示,则分页控制div将显示5页,但是首先记录在每页中重复.
The first row of table is showing when i am pressing next page on pagination.But the Number of Items to be shown is correct,ie if I have 5 Items to show ,then pagination control div will show 5 pages ,But first record is repeating in each pages.
我采取了 https://www.freakyjolly.com/angular-7-6-pagination-implement-local-or-server-pagination-in-3-steps/作为分页的参考.
I took https://www.freakyjolly.com/angular-7-6-pagination-implement-local-or-server-pagination-in-3-steps/ for a reference of pagination.
并且 https://stackoverflow.com/a/48293486/9493078 另外.
推荐答案
将学生[i]替换为学生
Replace students[i] as student
<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>
这篇关于如何在角度7的桌子上使用Ngx分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!