Angular 为角材料表创建可重用组件并更改其表头

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

我想更改

*matHeaderCellDef

中定义的标题：

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

例如：在表格标题中将

studentID

更改为Student ID，将

fname

更改为First Name

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

---

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

数据表.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>

{{tableData}}
{{element[tableData]}

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

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>

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

---

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

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>

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

---

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

employee.component.ts

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

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

数据表.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>

---

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

employee.component.ts

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

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

数据表.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>

---

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

{tableData，选择，
学生ID{Student ID}
fname{First Name}
}
{{element[tableData]}

---

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

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

{tableData，选择，
学生ID{Student ID}
fname{First Name}
}
{{element[tableData]}

---

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

另一种简单的方法是，创建一个映射，其中包含

map

，并且您的一个属性可以是每个列的标签，这样您就可以对字段、其属性和行为进行非常动态的控制

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

{{myMap.get（tableData.label}}
{{element[tableData]}

实现这一点的另一个简单方法是，创建一个具有

map

的映射，并且您的一个属性可以是每个列的标签，这样您就可以对字段、属性及其行为进行非常动态的控制

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

{{myMap.get（tableData.label}}
{{element[tableData]}

谢谢，我有个主意。问题是我不能触摸data-table.component的代码。我想把参数传递给employee.component。你连HTML文件都不能碰一下吗@谢谢你，我有个主意。问题是我不能触摸data-table.component的代码。我想把参数传递给employee.component。你连HTML文件都不能碰一下吗@达维卡21汉克斯。我想使用

Object.keys

解决了我的问题。@davecar21 haw我可以根据一些条件显示最后一列数据吗？比如一些数据表需要“编辑”、“删除”按钮，但一些数据表不需要。谢谢。我认为使用

Object.keys

解决了我的问题。@davecar21 haw我可以根据一些条件显示最后一列数据，比如一些数据表需要“编辑”、“删除”按钮，但一些数据表不需要。