Блог

Я впервые использую пользовательский интерфейс ignite в angular. Я столкнулся с некоторой проблемой. По сути, я создал библиотеку для ignite ui grid и использую ее. Я хочу изменить цвет текста конкретной ячейки сетки на основе текста, который я передаю в своих столбцах сетки следующим образом (во 2-м объекте с использованием свойства 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 ключевого слова also или любого ключевого слова.

Это я пробовал:

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

Это правильный способ сделать это? или есть какой-либо другой способ добиться этого.

Я воспользовался помощью этого стекблита https://stackblitz.com/github/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos/grid/grid-cell-styling

cellClasses принимает объектный литерал, содержащий пары ключ-значение. Ключ — это имя класса CSS, а значение — это либо функция обратного вызова, которая возвращает логическое значение, либо логическое значение. Обратите внимание на третий параметр — это значение ячейки. В вашем случае, если это 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 в вашем объекте столбца.