使用 NgStyle 动态设置 MatHeaderCell 样式？

Posted 2023-03-06

【中文标题】使用 NgStyle 动态设置 MatHeaderCell 样式？

【英文标题】：Styling a MatHeaderCell dynamically with NgStyle?

【发布时间】：2021-09-12 15:04:16

【问题描述】：

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

[ngStyle]="styleHeaderCell(c)"

I've created a demo here.

我可以看到：

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'
    
  ;

堆栈闪电战

https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts