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

}

Example

表格标题背景颜色动态变化 - 角度材料

1 个答案: