有没有办法根据文本更改igx-grid-cell的文本颜色

如何解决有没有办法根据文本更改igx-grid-cell的文本颜色

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

{
            field: 'ProductName',resizable: true,sortable: true,filterable: true,isTooltip: true,isHtml: true,},{
            field: 'QuantityPerUnit',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: ''"
      >

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

解决方法

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、{{1} } 和 cellValue 作为参数提供。您可以做的是根据单元格值检查单元格是否成功。像这样：

rowIndex

同时查看您提供的代码，我认为没有理由在您的列对象中提供 private downFontCondition = (rowData: any,columnKey: any,cellValue): boolean => { return cellValue === 'Success'; // you may change condition here }。