Multiple Pagination(Mat-table & Pagination): Multiple pagination in same component with different data source not working
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### 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
コントリビューションガイド
調査の方向性
リンクされている StackBlitz プロジェクトを開き、手順で説明されている 2 つの MatTableDataSource および MatPaginator インスタンスを使って問題を再現します。2 つの paginator バインディングを追跡し、それぞれのテーブルが独自のデータを独立してページングすることを確認します。完了の条件は、2 つ目の paginator が 1 つ目に影響を与えずに動作することです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 35/100