Как изменить или обновить тему angular ag-grid . Нужно ли нам писать какие-либо пользовательские css-файлы или использовать любую другую сетку, кроме from material

#html #css #api #web #angular-ui-bootstrap

#HTML #css #API #web #angular-ui-bootstrap

Вопрос:

У меня есть служебный файл , который вызывает API и получает данные . Я показываю полученные данные в ag-grid, присваивая значение данных строки значению переменной компонента. Также я использую тему ag-grid и отображаю данные в строках. Что успешно происходит сейчас. Но когда, если я хочу изменить стиль сетки, например, не показывать границы шлифования, цвет текста каждой строки, цвет фона сетки и т. Д., Чтобы он выглядел как спроектированный каркас из проволоки, я не могу сделать это с меньшими знаниями в angular, не уверенный, какой лучший способ добиться этого. Интересно, может ли кто-нибудь из вас, ребята, мне помочь.

Также еще один вопрос: у меня есть данные со столбцами w, x, y, поступающие из api, как добавить столбец z, которого нет в api, и добавить значения в строки

Ответ №1:

Чтобы ответить на ваш первый вопрос, вы можете переопределить переменные в теме ag-grid . Список переменных находится здесь: https://www.ag-grid.com/javascript-grid-themes-provided/#customizing-sass-variables

Другие стили вы можете переопределить точно так же, как переопределяют обычные стили css.

Что касается вашего второго вопроса: вы не сказали нам, какой фреймворк (если таковой имеется) вы используете, поэтому я собираюсь рассказать о своем опыте работы с angular ag-grid.

Когда мне нужно добавить столбец z в набор данных, я сопоставляю наблюдаемый результат из api следующим образом:

 this.apiService.getData().pipe(
  map((results: Array<any>) => results.map(item => item['z'] = valueZ))
).subscribe(results => this.gridOptions.api.setRowData(results));