为 Angular Material Table 创建可重用组件并更改其表头

Question

我目前正在为角材料表创建一个可重复使用的组件。 我已经设法为表格创建了一个可重用的组件。

我想按照定义更改*matHeaderCellDef 中的标题：

columnHeader = ['studendID', 'fname', 'weight', 'symbol'];

例如：将studentID 更改为学生ID，将fname 更改为表格标题中的名字。

现在的问题是我无法更改表头。

---

请看我到目前为止所做的代码。

data-table.component.html

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  <ng-container [matColumnDef]="tableData" *ngFor="let tableData of columnHeader">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{tableData}}    </th>
    <td mat-cell *matCellDef="let element"> {{element[tableData] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnHeader"></tr>
  <tr mat-row *matRowDef="let row; columns: columnHeader;"></tr>
</table>

data-table.component.ts

import {Component, OnInit, ViewChild, Input} from '@angular/core';
import {MatSort, MatTableDataSource, MatTable} from '@angular/material';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  @Input() tableData;
  @Input() columnHeader;
  
  dataSource;

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    console.log(this.tableData);
    this.dataSource = new MatTableDataSource(this.tableData);
    this.dataSource.sort = this.sort;
    
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

employee.component.html

<app-data-table [tableData]="tableData" [columnHeader]="columnHeader"></app-data-table>

employee.component.ts

import { Component, OnInit } from '@angular/core';
import { DataTableComponent } from '../shared/data-table/data-table.component';

export interface PeriodicElement {
  fname: string;
  studendID: number;
  weight: number;
  symbol: string;
}



@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  columnHeader = ['studendID', 'fname', 'weight', 'symbol'];

  tableData: PeriodicElement[] = [
    {studendID: 1, fname: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {studendID: 2, fname: 'Helium', weight: 4.0026, symbol: 'He'},
    {studendID: 3, fname: 'Lithium', weight: 6.941, symbol: 'Li'},
    {studendID: 4, fname: 'Beryllium', weight: 9.0122, symbol: 'Be'},
    {studendID: 5, fname: 'Boron', weight: 10.811, symbol: 'B'},
    {studendID: 6, fname: 'Carbon', weight: 12.0107, symbol: 'C'},
    {studendID: 7, fname: 'Nitrogen', weight: 14.0067, symbol: 'N'},
    {studendID: 8, fname: 'Oxygen', weight: 15.9994, symbol: 'O'},
    {studendID: 9, fname: 'Fluorine', weight: 18.9984, symbol: 'F'},
    {studendID: 10, fname: 'Neon', weight: 20.1797, symbol: 'Ne'},
  ];

}

---

请看 Stackblitz Link 获取实时代码。

Answer 1

希望对您有所帮助！ （你必须更改 html 才能获得标题）

employee.component.ts

将 columnHeader 保留为对象而不是数组。或者您可以将其扩展到对象数组以提及额外信息，例如管道、呈现为 html 等，

columnHeader = {'studentID': 'ID', 'fname': 'First Name', 'lname': 'Last Name', 'weight': 'Weight', 'symbol': 'Code'};

data-table.component.html

<ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnHeader[tableData]}}    </th>
    <td mat-cell *matCellDef="let element"> {{element[tableData] }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader)"></tr>
  <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);"></tr>

data-table.component.ts

@Input() columnHeader;
objectKeys = Object.keys;

StackBlitz

Answer 2

我会建议最简单的方法。 您可以定义函数来获取标题名称，如下所示

HTML：

<ng-container [matColumnDef]="tableData" *ngFor="let tableData of columnHeader">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{getHeader(tableData)}}    </th>
    <td mat-cell *matCellDef="let element"> {{element[tableData] }}</td>
  </ng-container>

TS：

getHeader(tableData) {
    if(tableData === "studendID")
      return "Student ID";
    if(tableData === "fname")
      return "First Name";
    return tableData;
  }

Answer 3

对 Shreenil 的回答略有增强：

<ng-container [matColumnDef]="tableData" *ngFor="let tableData of columnHeader">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 
    {tableData, select, 
        studentid {Student ID}
        fname {First Name}
    }
    </th>
    <td mat-cell *matCellDef="let element"> {{element[tableData] }}</td>
</ng-container>

模板中的绑定越少，实现的渲染性能就越高。

Answer 4

实现此目的的另一种简单方法是，创建一个包含 Map<field, properties> 的地图，您的属性之一可以是每一列的标签，这样您就可以对字段、其属性和行为进行非常动态的控制。

  <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(columnHeader)">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> 
      {{ myMap.get(tableData).label }}    
    </th>
    <td mat-cell *matCellDef="let element"> 
       {{element[tableData] }}
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="objectKeys(columnHeader)"></tr>
  <tr mat-row *matRowDef="let row; columns: objectKeys(columnHeader);"></tr>