无法更改 angular 中的 ag-grid 主题

Question

我有 angular 应用程序正在使用 ag-grid（angular 10 和 angular material）。我已经导入了深色和浅色主题，我正在尝试动态更改它们。我的

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>

component.ts

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

  constructor(private themeService: ThemeService) { }

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

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

Answer 1

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

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

无法更改 angular 中的 ag-grid 主题

unable to change ag-grid theme in angular

ag-grid

angular

ag-grid-angular