Question

我目前正在为角材料表创建可重复使用的组件。我一直在为表创建一个可重用的组件。

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

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

例如：在表头中将studentID更改为Student ID，将fname更改为First Name。

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

请参阅我到目前为止已完成的代码。

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：

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

希望这对您有所帮助！（您必须更改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 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>

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

4 个答案: