Categories: angular, typescript, ag-grid

Angular: ngOnChanges method cannot access dynamically set instance properties [duplicate]

1 answer

Can anyone explain why this.agGrid is undefined in the ngOnChanges method? It is being set in onGridReady which is executed before the ngOnChanges method.

In my component.ts file

  private onGridReady(agGrid) {     this.agGrid = agGrid  // set property     console.log(1, this.agGrid)    }   ngOnChanges(changed) {     console.log(2, this.agGrid)  // property undefined   } 

console output:

1 Object { type: "gridReady", api: {…}, columnApi: {…} } 2 undefined 

Any idea why this.agGrid is not defined in ngOnChanges?

Edit (showing how onGridReady is called):

html

<ag-grid-angular     class="ag-theme-balham"     style="width: 100%; height: 100%;"     [gridOptions]="gridOptions"> </ag-grid-angular> 

more of the ts file

  private createGridOptions() {     const gridOptions = {};     gridOptions['onGridReady'] = this.onGridReady;     return gridOptions;   }   ngOnInit() {     this.gridOptions = this.createGridOptions();   } 

All answers to this question, which has the identifier 60857407

The best answer:

You are assigning the function directly. This is effectively the same as calling onGridReady inside a function() { }. Inside a function() { }, the keyword this refers to the function itself.

You are not updating the agGrid property on the component - you are setting a property on the function itself.

If you want to refer to the outer scope - the component in this case - you should use an arrow function.

gridOptions['onGridReady'] = (agGrid) => this.onGridReady(agGrid); 

DEMO: https://stackblitz.com/edit/angular-ay79o3

In this demo, button 1 will never set the name property on the component due to how it is called. Button 2 will set the name property on the component because it is called inside an arrow function.

Last questions

how do i remove the switch on my home screen?
how to edit the JS date and time to update atuomatically?
How to utilize data stored in a multidimensional array
Powermockito not mocking URL constructor in URI.toURL() method
Android Bluetooth LE Scanner only scans when phone's Location is turned on in some devices
docker wordpress container can't connect to mysql container
How can I declare a number in java that is more than 64-bits? [duplicate]
Optaplanner solutionClass entityCollectionProperty should never return null error when simple JSON object passed to controller
Anylogic, get the time a pedestrain is in a queue
How do I fix this syntax issue with my .flex file?
Optimizing query in PHP
How to find the highest number of a column and print two columns of that row in R?
Ideas on “Error: Type com.google.firebase.iid.zzav is referenced as an interface from com.google.firebase.messaging.zzd”?
JCIFS SmbFile.exists() and SmbFile.isDirectory() return false when it exists and I can listFiles()
PHP total order
Laravel booking system design
neural net - undefined column selected
How to indicate y axis does not start from 0 in ggplot?
Fragments in backStack
Spinner how to change the data