Создайте повторно используемый компонент для угловой таблицы материалов и измените его заголовок таблицы

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

Небольшое улучшение по сравнению с ответом 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 3

Я бы предложил самый простой способ.Вы можете определить функцию для получения имени заголовка, как показано ниже:

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;
  }