Как установить стиль строки динамически зависит от данных? - PullRequest
Новая
       9

Как установить стиль строки динамически зависит от данных?

0 голосов
/ 16 апреля 2019

Хорошо, мне нужно установить некоторые правила стиля, такие как цвет фона для всей строки (для Ag-grid ) , зависит от некоторых данных, которые не должны отображаться или быть в таблице. Кроме того, в таблице много данных, которые сортируются и обновляются в режиме реального времени. Какой способ сделать это лучше?

Я использую Angular 6 и ag-grid ^ 17.1.1 в моем проекте.

Поскольку стиль строки зависит от определенного значения, я добавляю это значение в таблицу и устанавливаю флаг скрытия в значение true. Тогда я просто установил функцию getRowStyle в gridOptions . 

getRowStyle: (params) => {
  if (params.data.type === 'car' && params.data.value === 'audi') {
    return { 'background-color': 'green' };
  }
  if (params.data.type === 'car' && params.data.value === 'ford') {
    return { 'background-color': 'blue' };
  }
}

Может быть, есть ли лучший способ сделать это?

1 Ответ

0 голосов
/ 16 апреля 2019

для работы с ag-Grid, я предлагаю установить класс для строки и иметь тот класс, который применяет любые стили, которые вам нужны для каждого случая. Я предлагаю идти с классом, а не с прямыми стилями, потому что он чище и быстрее (см. Здесь Встроенные стили против классов )

способ сделать это, я думаю, показан здесь в документации ag-Grid https://www.ag -grid.com / javascript-grid-row-styles / # row-class-rules

и, в частности, я думаю, что этот пример самый чистый и самый прямой. 

gridOptions.rowClassRules: {
  // apply green to 2008
  'rag-green-outer': function(params) { return params.data.year === 2008},

  // apply amber 2004
  'rag-amber-outer': function(params) { return params.data.year === 2004},

  // apply red to 2000
  'rag-red-outer': function(params) { return params.data.year === 2000}
}

ИЛИ сокращенная версия 

gridOptions.rowClassRules: {
    'rag-green': 'data.age < 20',
    'rag-amber': 'data.age >= 20 && data.age < 25',
    'rag-red': 'data.age >= 25'
}

Оригинальный ответ

Прямой ответ - связать с [ngStyle], как в примере, который я здесь поднял прямо из angular.io здесь https://angular.io/guide/template-syntax#ngStyle

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };

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

<div [style.background-color]="isFordCar(data) ? 'blue' : 'green'" >
</div>

ИЛИ еще лучше, почему бы не использовать класс, который в конечном итоге чище и имеет тот же синтаксис связывания 

<div [class.ford]="isFordCar(data)" >
</div>
...