angular - 一个组件中的多个材料分页在 Angular 中不起作用
问题描述
我尝试创建一个组件,其中包含两个数据表,每个数据表和另一个数据源。由于我的原因,在组件加载后我的表格不可见,*ngIf
因此我无法使用ngAfterViewInit()
我正在使用用户在 Github 上指出的解决方案:
private paginator: MatPaginator;
private reportingPaginator: MatPaginator;
private sort: MatSort;
private reportingSort: MatSort;
@ViewChild(MatSort) set matSort(ms: MatSort) {
this.sort = ms;
this.reportingSort = ms;
this.setDataSourceAttributes();
}
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.reportingPaginator = mp;
this.setDataSourceAttributes();
}
setDataSourceAttributes() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.reportingDataSource.paginator = this.reportingPaginator;
this.reportingDataSource.sort = this.reportingSort;
}
但我仍然无法让它工作。当两个分页器都包含在@ViewChild(MatPaginator)
. 如果我只包括其中一个分页器
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.reportingPaginator = mp;
this.setDataSourceAttributes();
}
或者
@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.setDataSourceAttributes();
}
我包括的那个工作正常!那么我需要做什么才能让两个分页器都工作呢?
解决方案
对于单个页面中存在的多个 MatPaginator 和 MatSort 组件,您需要使用
@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
@ViewChildren(MatSort) sort = new QueryList<MatSort>();
在您的代码中,它将返回您的 MatSort 和 MatPaginator 列表,这些列表按照它在您的页面中出现的顺序定义。下面是完整的实现
import { Component, OnInit, ViewChild, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
export interface AssignmentElement {
assignmentId: number;
action: string;
userName: string;
roleName: string;
enabled: string;
createdOn: string;
createdBy: string;
modifiedOn: string;
modifiedBy: string;
status: string;
}
export interface RoleElement {
roleId: number;
action: string;
roleName: string;
roleDescription: string;
createdOn: string;
createdBy: string;
modifiedOn: string;
modifiedBy: string;
status: string;
}
export const ASSIGNMENT_ELEMENT_DATA: AssignmentElement[] = [
{ assignmentId: 1, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 2, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 3, action: 'Grant', userName: 'ADummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 4, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 8, action: 'Grant', userName: 'BDummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 1, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 12, action: 'Grant', userName: 'ZDummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 12, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 19, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 111, action: 'Grant', userName: 'PDummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 122, action: 'Grant', userName: 'Dummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ assignmentId: 133, action: 'Grant', userName: 'QDummy', roleName: 'admin', enabled: 'Y', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' }
];
export const ROLE_ELEMENT_DATA: RoleElement[] = [
{ roleId: 1, action: 'Create', roleName: 'admin', roleDescription: 'This is test role', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ roleId: 3, action: 'Create', roleName: 'cadmin', roleDescription: 'This is test role', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ roleId: 1, action: 'Create', roleName: 'admin', roleDescription: 'This is test role', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ roleId: 5, action: 'Create', roleName: 'vadmin', roleDescription: 'This is test role', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ roleId: 4, action: 'Create', roleName: 'zadmin', roleDescription: 'This is test role', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' },
{ roleId: 1, action: 'Create', roleName: 'admin', roleDescription: 'This is test role', createdOn: '21-Feb-2018', createdBy: 'Dummy', modifiedOn: '', modifiedBy: '', status: 'PENDING' }
];
@Component({
selector: 'app-myqueue',
templateUrl: './myqueue.component.html',
styleUrls: ['./myqueue.component.css']
})
export class MyqueueComponent implements OnInit, AfterViewInit {
dataSource1: MatTableDataSource<AssignmentElement>;
dataSource2: MatTableDataSource<RoleElement>;
@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
@ViewChildren(MatSort) sort = new QueryList<MatSort>();
assignmentColumn: string[] = [
'select', 'assignmentId', 'action', 'userName', 'roleName', 'enabled', 'createdOn', 'createdBy', 'modifiedOn', 'modifiedBy', 'status'
];
roleColumn: string[] = [
'select', 'roleId', 'action', 'roleName', 'roleDescription', 'createdOn', 'createdBy', 'modifiedOn', 'modifiedBy', 'status'
];
constructor() {
this.dataSource1 = new MatTableDataSource<AssignmentElement>(ASSIGNMENT_ELEMENT_DATA);
this.dataSource2 = new MatTableDataSource<RoleElement>(ROLE_ELEMENT_DATA);
}
ngOnInit() {
}
ngAfterViewInit() {
this.dataSource1.paginator = this.paginator.toArray()[0];
this.dataSource1.sort = this.sort.toArray()[0];
this.dataSource2.paginator = this.paginator.toArray()[1];
this.dataSource2.sort = this.sort.toArray()[1];
}
}
推荐阅读
- python - Python:从标量场的梯度中获取向量场
- amazon-athena - 为什么 Athena JsonSerde 字段名称映射不起作用?
- javascript - 在 500 毫秒内停止点击事件,我该怎么做?
- html - Boostrap 导航栏扩展无法正常工作
- c# - 如何在 C# 中实现 Huffman 代码压缩和解压
- robotics - 在任何地方以自动化方式打印工作日
- php - 如何动态替换字符串?
- debugging - Firefox 上的 Google Analytics JS 代码中的“返回语句后代码无法访问”错误 - 这是我的错吗?
- c# - 如何通过现有对象创建新对象?
- javascript - 第一次后再次按下ajax按钮会出现奇怪的错误