有什么方法可以根据文本更改 igx-grid-cell 的文本颜色答案

【问题标题】：Is there any way to change text color of igx-grid-cell based on text有什么方法可以根据文本更改 igx-grid-cell 的文本颜色
【发布时间】：2021-04-08 04:56:29
【问题描述】：

我第一次在 Angular 中使用 ignite ui。我面临一些问题。基本上我已经创建了用于点燃 ui 网格并使用它的库。我想根据我在我的网格列中传递的文本来更改特定的网格单元格文本颜色（在使用属性textColorChange 和textColor 的第二个对象中）

{
            field: 'ProductName',
            resizable: true,
            sortable: true,
            filterable: true,
            isTooltip: true,
            isHtml: true,
         },
         {
            field: 'QuantityPerUnit',
            filterable: true,
            sortable: true,
            columnWidth: '200px',
            textColorChange: true,
            textColor: [{text: 'Success', color: 'green'},{text: 'Failure', color: 'red'}]
         },

上面的对象声明在QuantityPerUnit 列中，如果我找到Success 关键字，则将文本颜色更改为绿色，Failure 关键字或任何关键字也相同。

这是我试过的：

html

  <igx-column
         #col
         *ngFor="let column of columns"
         [field]="column.field"
         [header]="column.title ? column.title : column.field"
         [dataType]="column.dataType ? column.dataType : 'string'"
         width="{{ column.columnWidth ? column.columnWidth : config.defaultColumnWidth }}"
         [cellClasses]="column.textColorChange ? textColorChangeClasses: ''"
      >

ts

private successTextColorCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] === this.columns.forEach((text) => {
      text.textColor['text']
    })
  }
  private failureTextColorCondition(rowData: any, columnKey: any): boolean{
    return rowData[columnKey] === 'Failure'
  }
  textColorChangeClasses = {
    successText: this.successTextColorCondition
  };

.scss

.successText {
   color: $success-text-color
}

但我收到错误core.js:4352 ERROR TypeError: Cannot read property 'columns' of undefined

这是正确的方法吗？或者有没有其他方法可以实现这一点。

我得到了这个 stackblitz 的帮助 https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/grid/grid-cell-styling

【问题讨论】：

标签： javascript angular typescript infragistics ignite-ui

【解决方案1】：

cellClasses 接受包含键值对的对象字面量。 Key 是 CSS 类的名称，而 value 是返回布尔值的回调函数或布尔值。注意第三个参数 - 它是单元格值。在你的情况下，如果是success，你应该返回true，不是吗？

你在successTextColorCondition做的是：

private successTextColorCondition(rowData: any, columnKey: any): boolean {
    return rowData[columnKey] === this.columns.forEach((text) => {
        text.textColor['text']
    })
}

this.columns.forEach 将始终返回 undefined，并且永远不会应用该类。

实际上，一旦您到达successTextColorCondition，您就确定textColorChange 是该列的true，并且您有rowData、columnKey、cellValue 和rowIndex 作为参数提供。您可以做的是根据单元格值检查单元格是否成功。像这样的：

private downFontCondition = (rowData: any, columnKey: any, cellValue): boolean => {
    return cellValue === 'Success'; // you may change condition here
}

同时查看您提供的代码，我看不出有理由在您的列对象中提供textColor。

【讨论】：