2

Hi I have a list like,

[{…}, {…}, {…}]

0: {name: "Manu", age: "21", hobbies: Array(4)}

1: {name: "Anu", age: "20", hobbies: Array(3)}

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 ,

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.

I took https://www.freakyjolly.com/angular-7-6-pagination-implement-local-or-server-pagination-in-3-steps/ for a reference of pagination.

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

Community
  • 1
  • 1
ADARSH K
  • 606
  • 1
  • 8
  • 21

1 Answers1

1

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>
Ininiv
  • 1,325
  • 7
  • 12
  • Thanks for the Answer.It worked.But Can i get to know What was the mistake? – ADARSH K Dec 13 '19 at 05:13
  • `let student of students` already provides each item in `students` as an object. There is no index involved here. – Ajit Panigrahi Dec 13 '19 at 05:15
  • @Ininiv Before I Was creating whole table without pagination.In that time students[i].name and students[i].age were working fine.But when pagination arrives this error came.What is the reason? – ADARSH K Dec 13 '19 at 05:15
  • i will hold the index value i.e, 0-4. students[0] will always print your first object. paginate pipe return values from students but students remains same – Ininiv Dec 13 '19 at 05:19
  • Its seems like @Ininiv have answer your question, just the matter for your understanding, student of students represent the object of the array and you do not require [i]. ngFor will act as a repeater for your list as to show the iterable object of your list. For more information, please refer to https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor . – Mnemo Dec 13 '19 at 06:29