问题标签 [mat-table]

我正在尝试添加rowSpan and colSpan. Angular material Table header谁能帮我实现它。

下面是我想使用材料表获得的附加标题

单击垫表中的按钮后，我试图隐藏一行。我不知道该放在哪里*ngIf。我试了一下，ng-container但它不起作用。下面是我的 HTML 文件。

我是 Angular 7 的新手，正在处理 Angular Mat 表以显示来自后端服务器的响应并对数据执行排序、过滤和分页。

分页按预期工作，但排序和过滤无法正常工作。我还导入了所有必需的模块。有人可以帮我弄这个吗？

Joblist.component.ts

joblist.component.html

来自后端服务器的响应

搜索和排序对响应不起作用。

我试图弄清楚如何使用 Angular mat-table 对列进行分组。我不知道如何从这个开始，我似乎无法在任何地方找到一个例子。前两个部分需要如下图所示进行分组：

我使用 angular 6、firebase 和材料 angular。我可以将我的数据加载到表格中，我可以对它们进行排序，拥有分页器，并在全局范围内过滤它们

我现在想修改我的过滤器，使其只过滤“名称”​​列，并有第二个过滤字段来过滤“常用”列。

你能帮我制定策略吗？

我使用 Angular 6、Firebase 和 Angular 材质。

我有 30,000 个 json 对象存储在 firebase 中，我想将它们加载到 mat-table 中。只有我比我希望的要低得多。我等了 30 秒才能点击我的应用程序，有时 chrome 会出错...

然而，我在分页后加载我的数据。

有人可以告诉我这是正常的还是有克服这个问题的策略？谢谢你。

也许我可以用 angular 7 和无限滚动来做到这一点？你有一个例子吗？

当我单击行上的任意位置时，我的行被选中，即使是我的单选按钮和滑动切换，我希望它仅在用户单击复选框时被选中

我有一个 mat-table 并希望使列可调整大小，所以我偶然发现了 CSS 属性“resize”，它非常适用于常规 HTML 表

基本 HTML：

CSS：

这为标题提供了一个非常好的框，您可以使用它调整列的大小。然而，当试图把这个完全相同的东西带到我的垫子上时，拖动框根本没有出现。

我已经删除了这两个示例的非标题行，因为它们现在无关紧要。我还尝试将 tableHeaderCellDiv （与纯 HTML 相同的 CSS）作为一个类插入到任何地方，猜测这就是问题所在。

我做错了什么，还是该功能根本不适用于 Mat-Tables？

[编辑：]感谢@KrishnaRathore，我现在知道我的代码（可能）不是问题，但 Firefox 是。如果您对 Chrome 感到满意，请查看他的答案，它可以工作。

但是，这个问题似乎是 Mat-Table 独有的，因为我的项目中有另一个小的纯 HTML 表，可以很好地调整大小。

我正在开发一个 Angular 7.3.8 应用程序，我正在使用 Angular Material 库。我可以mat-table通过 NgOnInit 循环用数据初始化组件，但是当我尝试通过某些函数用一些数据更新表时，UI 没有被更新。

已经尝试使用 NgZone 强制更新 UI，但仍然无法正常工作。

这是模板的代码：

这是更新功能：

日志显示 dataSource 数组正在更新，但 UI 未显示新值。

我想使用 a<mat-table>来显示选项的名称及其对应的给定值（供用户更改）。由于选项可能需要通过不同的方式设置它们的值（例如滑动切换或垫选择），我必须在没有数据源的情况下写下来（或者至少据我所知，不能在打字稿文件中使用预先编写的 html 标签）。

因此，我的 MWE 将是这样的：

但是，当我查看我的页面时，它只显示一行没有任何字符串。我想在一个<mat-card>（或者更确切地说<mat-card-content>）内使用这个表，但即使我在外面尝试它，我也只是得到了这条线而没有别的。这是它在垫卡中的样子：

如何正确显示表格？

*编辑：* 因为它是被要求的，所以这里也是 .ts 文件。

这比最小的工作示例要多一些，所以我将解释一下：

• 我的选择之一是分辨率，可以通过mat-select
• 这mat-select在 html 文件中定义如下
• 这mat-select将被赋予预定义的值，如resolutions数组中定义的那样

• 我的另一个选择就是选择全屏，使其成为mat-slide-toggle（但是，这还没有完全实现）

  <mat-select #resolutionSelect fxFlex="200px"> <mat-option *ngFor="let res of resolutions" [value]="res.value" class="right"> {{res.value}} </mat-option> </mat-select>