使用 NgStyle 动态设置 MatHeaderCell 样式？答案

【问题标题】：Styling a MatHeaderCell dynamically with NgStyle?使用 NgStyle 动态设置 MatHeaderCell 样式？
【发布时间】：2021-09-12 15:04:16
【问题描述】：

我正在尝试为 MatHeaderCell 实例提供动态样式，如下所示：

[ngStyle]="styleHeaderCell(c)"

我可以看到：

styleHeaderCell(c)

接收列并返回对象，但未应用样式，因此列的最小宽度仍为12rem，我希望它为4rem。想法？

【问题讨论】：

mat-header-cell { width: 14rem; } 您只能在全局 style.css 文件中使用此 css 类并删除 ngStyle 部分。从 ngStyle 调用方法不是很好的实践原因，Angular 会在每次更改检测时调用此方法。
我有一个通用表格组件，它使用分页器、排序等预构建，我需要能够提供样式作为输入对象。您有更好的方法通过@Input 呈现设置吗？

【解决方案1】：

这似乎是您的 styles 辅助函数中的语法问题。

试试这个。

public styles: any = {
    ID: {
      'min-width': '4rem',
      'background-color': 'red'
    }
  };

堆栈闪电战

【讨论】：