невозможно изменить тему ag-grid в angular

У меня есть угловое приложение, в котором используется ag-grid (angular 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>

component.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
person Ashish    schedule 24.09.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вам нужно использовать async трубу. Обновите свой код со строкой [ngClass] до следующего:

[ngClass]="!(isDarkTheme | async) ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"
person progm    schedule 24.09.2020
comment
@ Ашиш Нет проблем. Рад помочь. - person progm; 24.09.2020