angular - 编辑表格列标题

Question

我想知道是否有任何方法可以编辑 mat-table 的列标题并将新值存储在某个变量中。我在任何地方都没有找到令人满意的答案。

Answer 1

您可以轻松地编辑表的列标题并将新值存储在某个变量中，如下所示：

.html 文件

<table>
  <tr>
    <th>{{heading1}}</th>
    <th>{{heading2}}</th>
    <th>{{heading3}}</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

.ts 文件

heading1 = 'Test1';
heading2 = 'Test2';
heading3 = 'Test3';

现在，表格标题将Test1是Test2和Test3。因此，现在如果您将heading1变量更改为'Heading 1'. 表格的第一个标题将更改为Heading 1。

---

有很多有效和更清洁的方法可以做到这一点。
请阅读：https ://material.angular.io/components/table/overview