angular - 如何在使用标题模板的表格中使用 Angular Material MatSort？

Question

我正在创建一个可在整个项目中重复使用的自定义表格控件。我希望这张表使用 MatSort在内部。它还必须灵活，所以我使用标题和正文模板。

问题是我无法指定 mat-sort-header在 <th> 上在模板内。在我的项目中它不起作用(忽略指令)。我创建了一个简化的 stackblitz，控制台显示错误:MatSortHeader must be placed within a parent element with the MatSort directive .

Here is the Stackblitz

我放了最少量的代码来显示问题。我想要实现的是这样的:

<my-templated-table>
  <ng-template #header>
    <tr>
      <th mat-sort-header="sortable">Sortable</th>
    </tr>
  </ng-template>
</my-templated-table>

理想情况下，我什至想要自定义指令来排序标题，这样我就可以隐藏 MatSort来自消费者的语法。

我花了几个小时试图找到解决方案，但每当我找到足够相似的东西时，它都没有答案。另外我读到一个指令不能在运行时添加另一个指令，所以我不知道我的理想方法是否可行。虽然我觉得两者都应该...

Answer 1

在 html 模板上:

<table mat-table [dataSource]="items" matSort>
 <ng-container matColumnDef="columnName">
    <th id="1" mat-header-cell *matHeaderCellDef mat-sort-header></th>
       <td mat-cell *matCellDef="let item">
         {{item.name}}
       </td>
 </ng-container>


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

在 ts 文件上:

displayedColumns: string[] = ['columnName'];

如果需要，还需要添加排序开关