Question

好吧，我需要为整个行（对于Ag-grid）设置一些样式规则，例如background-color，取决于一些未显示或不在其中的数据。表。此外，表中还有很多数据经过排序和实时更新。哪种方法更好？

我在项目中使用Angular 6和ag-grid ^ 17.1.1。

因为行的样式取决于某个值，所以我将此值添加到表中并将hide标志设置为true。然后我只设置getRowStyle function in 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' };
  }
}

也许，还有更好的方法吗？

Answer 1

对于使用ag-Grid，我的建议是为该行设置一个类，并让该类成为适用于每种情况的任何样式的类。我建议您使用类而不是直接样式，因为它更干净，更快捷（请参见此处Inline Styles vs Classes）

我认为这样做的方法在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>

如何根据数据动态设置行样式？

1 个答案:

原始答案