是否可以使用额外的指令创建有角度的材料垫表组件但仍保持列动态？

Posted 2023-02-22

【中文标题】是否可以使用额外的指令创建有角度的材料垫表组件但仍保持列动态？

【英文标题】：Is it possible to create an angular material mat-table component with extra directives but still keep columns dynamic?

【发布时间】：2020-11-07 17:17:45

【问题描述】：

有没有办法扩展一个自动包含 matSort 指令（以及与列交互的其他自定义指令，如过滤器）的 mat-table 并且仍然让里面的内容保存 mat-sort-header 指令？

<mat-table [matSortActive]="sortActive" [matSortDirection]="sortDirection" matSort>        
    <ng-content></ng-content>
</mat-table> 

这是一个示例：https://stackblitz.com/edit/angular-bxsavu。

我尝试自行创建一个组件，将<ng-content> 放入<table> 元素中，但这会产生错误：

DwfTableComponent.html:1 ERROR 错误：缺少标题的定义， 页脚和行；无法确定应呈现哪些列。 在 getTableMissingRowDefsError (table-errors.ts:48)

我尝试在整个模板中不添加任何内容，只使用原始 CDK_TABLE_TEMPLATE（参见 stackblitz 链接 above），这会产生错误：

错误类型错误：无法读取未定义的属性“viewContainer” 在 DwfMatTableExtendedComponent.CdkTable._forceRenderHeaderRows (table.ts:854)

所以看起来我真的无法对这项工作产生任何吸引力。

这一切的背景是，我们的网站有许多需要排序的表，但我们需要开发人员在编写标记时能够在哪些列中写入可排序的内容。如果我可以让它为 MatSort 工作，然后我可以将它应用到我自己的服务器端过滤组件，该组件的行为非常类似于 MatSort 功能（在 <table> 元素中有一个 customFilter 指令，在 @ 987654328@ 发现有一个 custom-filter-header 指令）。然后它的主要部分将是另一个功能，它允许表格在表格“暂停”时更改单元格显示（链接或文本） - 另一个由包装器控制但需要影响内部内容的功能。

我们当前的“表格包装器”中还有许多其他功能（搜索窗口、导出、分页），但这一部分一直是混乱的根源。当我不能制作一个由两个众所周知的组件组成的组件并且仍然使表格结构保持灵活时，我会感到有些崩溃。我确定我遗漏了其中的一部分，但这将大大减少我们必须编写的每个表的代码重复。

【参考方案1】：

通过使用原始的CDK_TABLE_TEMPLATE 并扩展源代码中的 CdkTable，我已经成功地建立并运行了一个表。从那里，我将 MatSort 指令放在我自己的组件上，然后像往常一样填写。

沿途有几个颠簸。对于初学者，您必须在模块中导入 CdkTableModule。接下来，您必须实现OnInit 并调用super.ngOnInit() 以使其渲染。然后样式化需要使用源代码的table.scss，即便如此，您也需要进行一些调整以使其看起来正确。

在这一点上，感觉就像我正在漫游到黑客领域，但最终有了牵引力，我想在我弄清楚为什么默认排序没有发生（以及字形没有出现）之后，我'将在我的路上将其扩展到我需要的东西。它还没有准备好投入生产，但开发已经导致对角度限制和能力的快速教育。

如果有人好奇，同样的链接 https://stackblitz.com/edit/angular-bxsavu 提供了我现在所处的位置。

【讨论】：

似乎您的 stackblitz 链接不再有效。你能更新一下吗？

对不起@PankajPrakash，降价在超链接中包含一个句点，我删除了它，现在它正在工作。对于迟到的回复和不便，我们深表歉意。