如何在使用模板的表格中使用棱角材料MatSort？
如何在使用模板的表格中使用棱角材料MatSort？
提问于 2021-03-25 14:46:29
我正在创建一个定制的表控件，以便在整个项目中重用。我希望这个表在内部使用MatSort。它也必须是灵活的，所以我使用模板的标题和正文。
问题是，我不能在模板内的mat-sort-header上指定<th>。在我的项目中，它只是不起作用(忽略指令)。我创建了一个简化的stackblitz，控制台在那里显示了一个错误：MatSortHeader must be placed within a parent element with the MatSort directive。
我把最小数量的代码放在那里来显示问题。我想要达到这样的目标：
<my-templated-table>
<ng-template #header>
<tr>
<th mat-sort-header="sortable">Sortable</th>
</tr>
</ng-template>
</my-templated-table>理想情况下，即使是我也希望使用自定义指令对头进行排序，这样我就可以向使用者隐藏MatSort语法。
我试着找了几个小时的解决方案，每当我发现类似的东西，它就没有答案。我还读过指令不能在运行时添加另一个指令，所以我不知道我的理想方法是否可行。虽然我觉得两者都应该是..。
回答 1
Stack Overflow用户
发布于 2021-03-25 15:48:01
在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'];此外，如果需要，还需要添加排序开关。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66801932
复制相关文章
相似问题
腾讯云开发者
