Question

我有一个动态CDK角材料垫表，该垫表已固定。它正在填充数据，但不允许我设置正确的列标题。显示的所有内容均来自UserInformation数组的key：value对。但是，我需要设置第二个数组以显示正确的标头名称，因为我无法控制来自API的键名，因此需要在TypeScript中进行设置。并非所有来自API的信息都会显示在表格中。我还将有多个表，并且需要使它完全可重用，以使所显示的内容在TypeScript中发生变化的地方都将被注入。

现在，我只能使displayColumnColumn名称正确显示在表中。

//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数组中的值。任何帮助将不胜感激。

Answer 1

无需在标题中使用附加数组，只需在mat-header-cell中添加一个管道即可将密钥转换为显示值。例如，请参见此Stackblitz。

具有动态复选框的CDK角表找不到正确的列名

1 个答案: