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

Хорошо, мне нужно установить некоторые правила стиля, такие как цвет фона для всей строки (для 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' };
  }
}

Может, есть способ лучше?


angular ag-grid ag-grid-angular
person Alex Fomin    schedule 16.04.2019    source источник
comment
Вы можете рассмотреть возможность использования класса CSS для инкапсуляции стилей и переключения классов на основе данных. Я не знаю, делает ли ag-grid это легко или сложно.   -  person Heretic Monkey    schedule 17.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Для работы с 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>
person ccamac    schedule 16.04.2019
comment
Думаю, вы не правильно поняли, о чем я. Главный вопрос - как лучше работать с Ag-сеткой. Не уверен, что эти привязки с ним подойдут, но попробую. - person Alex Fomin; 17.04.2019
comment
Я вижу сейчас. Я внесу правку, чтобы соответствующим образом изменить ответ. Извинения. - person ccamac; 17.04.2019