angular / angular/components

Multiple Pagination(Mat-table & Pagination): Multiple pagination in same component with different data source not working

Ouverte
#20,154 12 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
area: cdk/table P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Description
I tried to put two tables in one component with different data sources which worked well with the data rending part. However, the paginator didn't work on the second table.

#### Reproduction
Please use StackBlitz to check the issue:
**StackBlitz Project Editor link**: https://stackblitz.com/edit/angular-brxwzo
**StackBlitz Output link**: https://angular-brxwzo.stackblitz.io

#### Steps to reproduce:
1. Create two table
2. Create two data sources with different numbers of elements into it.
3. Bind the data source with the respective data source for eg.
` displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
dataSource1 = new MatTableDataSource(myData);
`
**Table 1**
`
`
**Table 2**
` `
4. Create the paginator for the following datasouces:
` @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatPaginator, {static: true}) paginator2: MatPaginator;`
5. Only the first paginator will work in the output.

#### Expected Behavior

Like the first table pagination, the second table pagination should also work independently to the first as the data sources are different, the paginator pointing instance is different.

#### Actual Behavior

Only the first table pagination is working rest of all other table pagination are begin ignored.

#### Environment

- Angular: 9.0.5
- CDK/Material: 9.2.4
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.01

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Ouvrez le projet StackBlitz lié et reproduisez le problème en utilisant les deux instances de MatTableDataSource et MatPaginator décrites dans les étapes. Suivez les deux bindings des paginators et vérifiez que chaque table pagine ses propres données indépendamment ; la tâche est terminée lorsque le second paginator fonctionne sans affecter le premier.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Clairement spécifiée
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.