具有动态复选框的CDK角表找不到正确的列名 [英] CDK Angular Table with dynamic checkboxes not finding correct column names
问题描述
我有一个动态CDK角材料垫表，该垫表已固定.它正在填充数据，但不允许我设置正确的列标题.显示的所有内容均来自UserInformation数组的key:value对.但是，我需要设置第二个数组以显示正确的标头名称，因为我无法控制来自API的键名，因此需要在TypeScript中进行设置.并非所有来自API的信息都会显示在表格中.我还将有多个表，并且需要使它完全可重用，以使所显示内容的位置在TypeScript中发生变化，其他所有内容都将被注入.
I have a dynamic CDK Angular Material mat-table that I have fixed a mat-checkbox to. It is populating data, but it is not allowing me to set the correct column headers. Everything that gets displayed is from the key:value pairs from the UserInformation array. However, I need to set a second array to display the correct header names as I will not have control of the key names coming from the API and will need to set them in the TypeScript. Not all information coming from the API will be displayed in the table. I will have multiple tables as well and need to make this completely reusable to where on the content being displayed will change in the TypeScript, everything else will be injected.
现在，我只能使displayColumnColumn名称正确显示在表中.
Right now I'm down to just getting the displayedColumn names to appear correctly in the table.
//Dummy Data
const UserInformation: any[] = [
{
'firstName': 'Jane',
'lastName': 'Doe',
'jobRole': 'My Job',
'company': 'Work',
'status': true,
'employeeID': '23456',
'phone': '(253)227-2567',
'email': 'myemail@myemail.com'
},
{
'firstName': 'John',
'lastName': 'Smith',
'jobRole': 'My Job',
'company': 'Work',
'status': true,
'employeeID': '23456',
'phone': '(253)227-2567',
'email': 'myemail@myemail.com'
}
];
columns: any;
// Material Table Columns
@Input() public content: any;
public rows = new MatTableDataSource<any>();
headers = [
{ filed: '',
},
{ field: 'firstName',
title: 'First Name',
cell: (element: any) => `${element.firstName}`,
},
{ field: 'lastName',
title: 'Last Name',
cell: (element: any) => `${element.lastName}`,
},
{ field: 'employeeID',
title: 'Employee ID',
cell: (element: any) => `${element.employeeID}`,
},
{ field: 'jobRole',
title: 'Job Role',
cell: (element: any) => `${element.jobRole}`,
},
{ field: 'email',
title: 'Email',
cell: (element: any) => `${element.email}`,
}
];
displayedColumns = this.headers.map(c => c.field);
public selection = new SelectionModel<any>(true, []);
// Material Table Functionality
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild('tableResults') tableResults;
this.showUsers();
// Material Table
public filterBy(event: any): void {
const filterBy: string = event.target.value;
this.rows.filter = filterBy;
}
public isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.rows.data.length;
return numSelected === numRows;
}
public masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.rows.data.forEach(row => this.selection.select(row));
}
public checkboxLabel(row?: any): string {
return (!row)
? `${this.isAllSelected() ? 'select' : 'deselect'} all`
: `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
}
private updateRows(): void {
this.rows = new MatTableDataSource<any>(this.displayedColumns);
this.rows.sort = this.sort;
this.rows.paginator = this.paginator;
}
private updateColumns(): void {
this.columns = ['select'];
for (const column of Object.keys(this.displayedColumns[0])) {
this.columns.push(column);
}
}
private updateTable(): void {
if (this.displayedColumns) {
this.updateRows();
this.updateColumns();
}
}
public showUsers(): void {
this.displayedColumns = UserInformation;
this.updateTable();
this.selection.clear();
}
item1() {
alert('solved!!');
// this.target.classList.add('class3');
}
dragStarted(event: CdkDragStart<string[]>, index: number ) {
if (event) {
this.previousIndex = index;
}
}
dropListDropped(event: CdkDropList<string[]>, index: number) {
if (event) {
moveItemInArray(this.columns, this.previousIndex, index);
}
}
//HTML TABLE
<mat-table [dataSource]="rows" class="mat-elevation-z8" cdkDropListGroup matSort matSortActive="symbol" matSortDirection="asc">
<ng-container *ngFor="let column of columns; let i = index" matColumnDef="{{column}}">
<span *ngIf="i === 0">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
[aria-label]="checkboxLabel()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</mat-cell>
</span>
<span *ngIf="i !== 0">
<mat-header-cell *matHeaderCellDef
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
(cdkDragStarted)="dragStarted($event, i)"
[cdkDragData]="{name: column, columIndex: i}"
mat-sort-header>
{{ column }}
</mat-header-cell>
<mat-cell *matCellDef="let row" > {{ row[column] }} </mat-cell>
</span>
</ng-container>
<mat-header-row *matHeaderRowDef="columns; sticky: true;"></mat-header-row>
<mat-row *matRowDef="let row; columns: columns;" (click)="selection.toggle(row)" [routerLink]="['']"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
抱歉，这是很多代码，但是此表中发生了很多事情.我真的只是希望指向正确的方向，以从连接到displayColumns的表头"中列出表头，以显示在表头中，而不是显示UserInformation数组中的值.任何帮助将不胜感激.
Sorry this is a lot of code, but there is a lot happening in this table. I'm really just hoping to get pointed in the right direction to get the table headers listed from "header" that is connected to displayedColumns to display in the table header instead of the value from the UserInformation array. Any help is greatly appreciated.
推荐答案
无需在标题中使用附加数组，只需在mat-header-cell中添加管道即可将键转换为显示的值.
例如，请参见此 Stackblitz .
Instead of using an additional array for headers, simply add a pipe in mat-header-cell that transforms the key to a displayed value.
See this Stackblitz for example.
这篇关于具有动态复选框的CDK角表找不到正确的列名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
