-1

I am getting column data using @Input() like this

@Input() columns: any;

I checked in ngOnInit() also by consoling, it getting the data also. But still getting above error in successTextColorCondition() method

    export class GridComponent implements OnInit, AfterViewInit {

  constructor(private excelExportService: IgxExcelExporterService, 
              private changeDetection: ChangeDetectorRef,
              private localeService:LocaleService) {
               }
  paginationSetting: GridPagination;

  // Inputs
  
  @Input() columns: Array<GridColumn>;


  @ViewChild('grid', { static: true }) public grid: IgxGridComponent;
  
  public successTextColorCondition(rowData: any, columnKey: any): boolean {
    console.log('columns', this.columns)
    return rowData[columnKey] === 'Success'
  }
  private failureTextColorCondition(rowData: any, columnKey: any): boolean{
    return rowData[columnKey] === 'Failure'
  }
  textColorChangeClasses = {
    successText: this.successTextColorCondition,
    failureText: this.failureTextColorCondition,
  };
  ngOnInit(): void {
    console.log('columns1', this.columns)
    this.setDefaultConfig();
    this.setDefaultPaginationConfig();
  }
  
}

But I am getting error :

ERROR TypeError: Cannot read property 'columns' of undefined

Is there anything I did wrong?

I also checked how to access this in callback function, but I am not able to understand. Please can anyone help in this?

Ashish Mishra
  • 571
  • 3
  • 11
  • 3
    Duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Guy Incognito Jan 01 '21 at 09:07
  • 1
    @GuyIncognito I already checked that blog but didn't understood – Ashish Mishra Jan 01 '21 at 09:09
  • Please share the code of the entire class – Yair Cohen Jan 01 '21 at 09:18
  • Would you please provide a minimal reproducible code example as a starting point, for example, an Angular project in https://stackblitz.com/. It's then way easier to help you. Read more about it at https://stackoverflow.com/help/minimal-reproducible-example –  Jan 01 '21 at 09:25
  • @Lonely for creating stackblitz for this demo will take time. I already added entire code. If you need anything else then please tell – Ashish Mishra Jan 01 '21 at 09:28
  • Dear Ashish, I think it is a timing problem, to analyze it, we need the big picture every time. If you want someone to help you quickly, make it a habit to always organize a StickBlitz beforehand. If it takes you time to do this, I can understand. Please understand, however, that answering takes time too. –  Jan 01 '21 at 09:47

3 Answers3

2

As it is call back function make changes

textColorChangeClasses = {
    successText: this.successTextColorCondition.bind(this),
    failureText: this.failureTextColorCondition,
  };
1

Please try changing

  textColorChangeClasses = {
    successText: this.successTextColorCondition,
    failureText: this.failureTextColorCondition,
  };

to

  textColorChangeClasses = {
    successText: (rowData: any, columnKey: any) => this.successTextColorCondition(rowData, columnKey),
    failureText: this.failureTextColorCondition,
  };

or

  textColorChangeClasses = {
    successText: this.successTextColorCondition.bind(this),
    failureText: this.failureTextColorCondition,
  };
Dani
  • 824
  • 7
  • 12
0

Firstly,

public successTextColorCondition(rowData: any, columnKey: any): boolean {
    console.log('columns', this.columns()) //<--why columns is called as function?
    return rowData[columnKey] === 'Success'
  }

Second, @Input and @ViewChild should be right on the top before constructor (some editors might complain)

export class GridComponent implements OnInit, AfterViewInit {
    @Input() columns: Array<GridColumn>;
    @ViewChild('grid', { static: true }) public grid: IgxGridComponent;

    constructor(){...}
j4rey
  • 2,582
  • 20
  • 34