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

Question

好的，我需要设置一些样式规则，例如整行的背景色 （对于 Ag-grid ），取决于一些不需要的数据显示或在 table 中。另外，table里面有很多数据，是排序的，实时更新的。哪种方式更好？

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

由于行的样式取决于某个值，我将此值添加到 table 并将隐藏标志设置为 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，我的建议是为该行设置 class，并让 class 成为为每种情况应用您需要的任何样式的行。我建议使用 class 而不是直接样式，因为它更干净、更快（参见此处 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}
}

或 shorthand 版本

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>

或者更好的是，为什么不使用 class，它最终更简洁并且共享相同类型的绑定语法

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

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

How to set row style dynamically depend on data?

ag-grid

angular

ag-grid-angular

原答案