无法以角度更改 ag-grid 主题答案

【问题标题】：unable to change ag-grid theme in angular无法以角度更改 ag-grid 主题
【发布时间】：2021-01-10 06:39:59
【问题描述】：

我有使用 ag-grid（角度 10 和角度材料）的角度应用程序。我已经导入了我正在尝试动态更改的深色和浅色主题。我的

style.scss

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine-dark.css";

带有网格的组件（app.component.html）

<ag-grid-angular
  style="width: 100%; height: 100%;"
  [ngClass]="!isDarkTheme ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>

组件.ts

export class AppComponent implements OnInit {
  isDarkTheme: Observable<boolean>;

  constructor(private themeService: ThemeService) { }

  ngOnInit(): void {
    this.isDarkTheme = this.themeService.isDarkTheme;
  }

isDarkTheme 的值正在正确更改，但是 Angular 在这两种情况下都只应用深色主题。如何在我的应用程序中同时应用深色和浅色主题。

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

您需要使用async 管道。使用[ngClass] 行将您的代码更新为：

[ngClass]="!(isDarkTheme | async) ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"

【讨论】：

@Ashish 没问题。很高兴能提供帮助。