表格标题背景颜色动态变化 - Angular 材质

Question

我按照这个例子来实现角度材料表。

https://stackblitz.com/angular/jejeknenmgr?file=src%2Fapp%2Ftable-basic-example.ts

这里我使用下面的 CSS 代码更改了 标题颜色。

.mat-header-cell {
    background: red;
}

我想从组件传递标题颜色而不是静态 CSS 方式。有什么方法可以动态改变标题颜色吗？

Answer 1

Css Var

并在组件中以编程方式更改变量值。

CSS

.mat-header-cell {
    background: var(--background-color)
}

组件

export class AppComponent {
  constructor()

  changeColor() {
    // set new color here
    document.documentElement.style.setProperty(`--background-color`, 'red');
  }
}

因此，当您更改 css 中的变量时，浏览器将更改 

.mat-header-cell

类中的值

另一种方法是在每个

background-color

项上使用内联样式

mat-header-cell

属性。

html 中

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef [style.background-color]="color"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

在组件中

export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
  color = 'green'

 changeColor() {
   this.color = 'red';
 }

}

示例

Answer 2

在你的情况下是：

.mat-mdc-cell, .mat-mdc-header-cell { background: var(--background-color) }