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

Question

好的，我需要为整行设置一些样式规则，例如背景颜色（对于Ag-grid），这取决于一些尚未显示或不在表格中的数据。 此外，表格中有很多数据是经过排序和实时更新的。 哪种方式比较好？

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

由于行的样式取决于某个值，我将此值添加到表中并将隐藏标志设置为 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-rules987654322@ 中显示了此方法

特别是我认为这个例子是最干净和最直接的。

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>