J'utilise pagination et ngFor avec searchPipe. Le problème est avec l'index de ngFor. Mon paginateur montre 10 éléments par page, mais le problème est lorsque je vais à l'index de la deuxième page de ngFor retourne au 0. Je ne peux donc itérer que de 0 à 10 éléments essentiellement pour chaque page de mon ensemble de données. Toute aide est appréciée.
<tr *ngFor="let item of testdata | customStoreFilter:searchRetail | paginate: { itemsPerPage: 10, currentPage: p };let i = index"
[ngClass]="eachmodel[i] ? 'active': ''" id="row{{i}}">
<td>
<textarea [(ngModel)]='remarks[i]'
(change)="isRemarksModelChanged($event.target.value,i,item)"></textarea>
</td>
</tr>
Donc, la partie i = index ne fonctionne pas correctement. Disons que j'ai 50 éléments dans mes données de test. Il devrait itérer de 0 à 50, au lieu de cela, il va de 0 à 10e élément dans chaque page puisque itemsPerPage vaut 10. Toute aide est appréciée.
3 Réponses :
Si j'ai bien compris votre question, voici ce que vous voulez.
<tr
*ngFor="let item of testdata | customStoreFilter:searchRetail | paginate: { itemsPerPage: 10, currentPage: p };index as i"
[ngClass]="eachmodel[i] ? 'active': ''" id="row{{i}}">
<td>
<textarea [(ngModel)]='remarks[i]' (change)="isRemarksModelChanged($event.target.value,i,item)"></textarea>
</td>
</tr>
Essayez celle ci-dessus si vous ne comprenez pas, faites-moi savoir que je la modifierai.
p >
Merci pour la réponse mais le problème est toujours le même. Disons que j'ai 50 objets dans mes données de test, puis j'aurai 5 pages parce que itemsPerPage vaut 10. Mais mon problème est de laisser i = index. Par exemple; quand je clique sur la deuxième page, le i qui est l'index devrait être 11-20, mais pour chaque page le «i» est seulement de 0 à 10. Toute aide est appréciée merci.
chaque page le "i" est seulement de 0 à 10. c'est vrai que vous pouvez utiliser pageIndex et pageSize pour indexer la calculatrice.
Exactement, je ne sais pas où vous voulez afficher la liste des éléments par page, mais avez-vous ajouté un contrôle de pagination comme ci-dessous:
<pagination-controls (pageChange)="p = $event"></pagination-controls>.Alors, essayez-le d'abord avec un simple UL / Li
Ce n'est pas une question de pagination. Le problème est de laisser i = index. Disons que j'ai 50 objets dans testdata. Ensuite, j'aurai 5 pages. Alors disons que j'ouvre la deuxième page. Le i qui est l'indice devrait être 11 mais il est à nouveau 1. Donc, pour chaque type d'index est de 0 à 10
J'écris pour angular 4+, en référence à [ngx-pagination] [1],
export class AppComponent {
page:number = 1;
collection = [];
constructor() {
for (let i = 1; i <= 100; i++) {
this.collection.push(`item ${i}`);
}
}
}
<div class="list">
<ul>
<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: page };index as i">
<span *ngIf="page==1">{{(i+1)}}{{item}}</span>
<span *ngIf="page>1">{{((page-1)*10)+(i+1)}}{{ item }}</span>
</li>
</ul>
<pagination-controls (pageChange)="page =$event">
</pagination-controls>
C'est ce que j'essayais de trouver. Merci.
Alors, quel est votre résultat attendu?
Veuillez compléter pour exemple minimal reproductible
il n'affiche que les données dans un tableau de remarques de 0 à 10. Mais disons que j'ai 50 données dans testdata. Ensuite, il devrait afficher les données dans des remarques de 0 à 50. C'est le problème