材料 11 - 应用 mat-sort-header 时无法右对齐 5 列中的 2 列 mat-h​​eader-cell

Posted 2023-02-22

【中文标题】材料 11 - 应用 mat-sort-header 时无法右对齐 5 列中的 2 列 mat-h​​eader-cell

【英文标题】：material 11 - unable to right justify 2 out of 5 columns mat-header-cell when mat-sort-header is applied

【发布时间】：2021-05-07 18:22:57

【问题描述】：

enter image description here我正在使用 Angular 材料 11。当使用带有 mat-h​​eader-cell 的 *matHeaderCellDef 定义每个列标题并且应用 mat-sort-header 时，我处于无法应用所需的情况风格。我可以通过应用 align="right" 来右对齐标题下方单元格的内容。但是，不仅标题不允许这样做，而且似乎在应用 mat-sort-header 时添加 css 类以提供任何调整都不能充分执行。似乎 mat-sort-header 最终构建了一个具有内联样式的子元素，它覆盖了上面应用的任何 css 类。

我尝试了很多事情，包括其他激发灵感的帖子。但是，还没有在任何地方看到这个确切的问题。

我有 2 列：“权重”和“值”，我试图右对齐列标题。

StackBlitz

感谢您对此提供的任何帮助。谢谢

【参考方案1】：

您可以使用以下样式正确设置标题

:host ::ng-deep .headerRight .mat-sort-header-content 
  justify-content: flex-end !important;
  width: 100% !important;

【讨论】：

感谢您的提示。我只是尝试使用相同的样式更新 stackblitz，但它没有做出改变。

我可以看到它在这里对齐。我刚刚删除了注释掉的代码。 stackblitz.com/edit/…

嗯。我检查了 firefox、chrome、safari、edge ......唯一正确的部分是单元格。列标题标题仍然是左对齐的。你使用的是什么浏览器 ？ （我在我所看到的顶部添加了一张图片）

我正在使用 Chrome 并尝试全屏查看此输出。最后剩余的空间用于排序图标。检查我上面分享的stackblitz

谢谢你。我什至尝试了您的 stackblitz（全屏），并且在所有浏览器中，标题“重量”和“值”仍然不正确。它们与这些标题下方的列中的内容不一致。列中的内容是右对齐的。