问题标签 [mat-table]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
490 浏览

angular - 面向列的垫表

我有一种情况,我从后端收到的数据是面向列的。该数据的外观示例如下:

到目前为止,我已经设法像这样配置我的 mat-table:

这给了我以下结果:

表格结果

而实际上我希望看​​到这样的表格:

有没有办法调整 matRowDef 以便将单元格属性定义为行?理想情况下,我只想在 mat-table 中更改它,所以我不需要操作我的数据然后再将其转换回来。

0 投票
0 回答
479 浏览

firefox - Angular Material Table Firefox Mat Row 单击事件,在 Mat Cell 中单击按钮

我想使用带有可点击行的角材料垫表以及带有 Firefox Browser的按钮列。

当我第一次添加按钮时,事件没有被触发(只是行的事件)。

我阅读了一些关于该问题的主题: Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

单击该行中单元格中的操作时触发 Angular Material 表行(单击)事件

我可以event.stopPropagation在 Chrome 浏览器上使用它,但不能在 Firefox 63.0.3(64 位)上使用。在 Firefox 中根本不会触发任何事件。

任何人都可以使用Firefox吗?

0 投票
1 回答
977 浏览

angular - Angular - mat-table 未显示来自 api 的任何数据

我的表格没有显示任何数据,API 调用在我的浏览器的开发人员工具中成功。

控制台中没有错误。

我的界面:

我的 API 调用:

我的表数据源

我的桌子

API 响应

0 投票
1 回答
534 浏览

angular - ngTemplateOutlet 在 mat-table 中不起作用

我正在尝试按照此处提到的解决方案以角度重用一些 html 组件。在我的场景中,我在一页中有 2 个垫子表,其中包含一些常见的列。我正在尝试将公共列放在模板中,并在我的 mat-table 定义中引用该模板。但它没有编译,角度无法在模板中找到列定义。这是stackblitz链接。请告知我错过了什么。

0 投票
4 回答
14393 浏览

angularjs - 在 mat-table 的 mat-cell 内实现 if else 条件 - Angular 5

我正在尝试在我的角度应用程序中的 mat-table 的 mat-cell 内实现 if else 条件。但我从控制台收到错误“错误错误:StaticInjectorError(AppModule)[NgIf -> TemplateRef]:”

我的代码是

任何帮助深表感谢。

0 投票
0 回答
1580 浏览

angular - Angular / Mat Table - 如何创建自定义表格组件包装垫表

我想创建自己的表格组件来添加一个复选框列和围绕一组 ng-container 列的操作。

例子

自定义表格组件将具有

不幸的是(显然)我失去了所有的上下文和变量。我只是不知道该怎么办。

谢谢你的帮助。

0 投票
2 回答
2710 浏览

angular - matSort 不适用于多个 mat-table

我有一个页面,其中包含从 2 个数据源填充的 2 个垫表。排序对我不起作用。请指教。这是stackblitz链接

TS 文件

我不能把 html 文件放在这里,stackoverflow 说了太多有问题的代码。请转到 stackblitz 查看 html。

0 投票
2 回答
14143 浏览

angular - 在 Angular 2 版本 6 中更新 MatTableDataSource 的正确方法

我有一个使用由 MatTableDataSource 提供的 mat-table 组件的列表。

在component.html中

在 component.ts

当我单击删除项目时,在服务器的成功回调中,我通过重新实例化 MatTableDataSource(this.resources) 来更新列表以反映新的结果集,并像这样传递新的结果集。这确实有效...

然而,即使这有效,我觉得这是错误的。

我读过一些文章说我必须扩展数据源?并调用 renderRows() 方法?我已经尝试过了,但我似乎无法让它在我的场景中工作。

我知道它代表我缺乏理解。

任何帮助/建议将不胜感激。

提前致谢。

0 投票
1 回答
3298 浏览

angular - 如何在角度 MatTable 中排序后获取更新的 Viewchildren 参考

我正在研究角度材料表,并希望使用ViewChildrenand获取 tableRow 参考ViewContainerRef

这里的 HTML 片段

<tr mat-row *matRowDef="let row; columns: displayedColumns;" #tableRows ></tr>

和 TS 片段

@ViewChildren('tableRows', {read: ViewContainerRef}) rowContainers

我能够获得表行引用,但问题是当我排序时,我无法在rowContainers变量中获得更新的 DOM 引用。

我找不到任何刷新rowContainers变量的方法。

有人知道如何刷新ViewChildren变量吗?

您可以在stackblitz中看到行为。

0 投票
0 回答
1059 浏览

angular - 如何在列角材料表中显示表头

为单个用户创建一个表,我想使用 Angular Material (mat-table)。

这是我在表中寻找的内容:

请注意,标题位于 1 列中,而不是像我在大多数材料表文档 ( https://material.angular.io/components/table/overview ) 中看到的典型行。

此外,用户对象基本上是 ts 文件中的数据源(它不是一个数组,因为它只是一个单一的用户。)有人可以帮我实现这个吗?

我已经看到了如何在角度材料表中连续显示表格标题?但这会假设当我只有一个存储在一个对象中时我有多个用户。

对此,我真的非常感激。