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

#### 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

Mở dự án StackBlitz được liên kết và tái hiện sự cố bằng hai instance MatTableDataSource và MatPaginator được mô tả trong các bước. Theo dõi hai paginator binding và xác minh rằng mỗi bảng phân trang dữ liệu riêng của mình một cách độc lập; hoàn tất khi paginator thứ hai hoạt động mà không ảnh hưởng đến paginator thứ nhất.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.