setRowData在首次调用Angular 6上不起作用

Question

I have an ag-grid that has buttons for changing the data of each row. When I click the button, it supposed to show another ag-grid within a bootstrap modal; But the problem is when the grid loads for the first time, it does not show any data as it said "No Rows To Show". And when I click for the second time it shows grid data.

Here is my code:

OnGridReady(params){
      this.gridApi = params.api;
      this.loadQuestions();
      this.gridApi.setRowData(this.Questions);
     }

As you want to know more about loadQuestion()

private loadQuestion(){
    this.managementService.getQuestions().subscribe(
        (_q: Question[]) => {
             this.Questions = _q;
        },(err){ blah blah }    
    );

Can you tell where is the problem?

Answer 1

Do setRowData inside your loadQuestion .

private loadQuestion(): void => {
   this.managementService.getQuestions().subscribe(
      (_q: Question[]) => {
         this.Questions = _q;
          this.gridApi.setRowData(this.Questions);
      },(err){ blah blah }    
);

The issue I think you got was due to when you did setRowData , data for this.Questions was not available.

Next time when you loaded, it would be there.

---

Update

When you define the function as per what is there in the question, you may face the below error.

"Cannot read property 'setRowData' of undefined".

You can use arrow function to get the outer scope available inside your function as per the code shown in this answer.

Refer the link for more details on the Arrow function

Lovingly called the fat arrow (because -> is a thin arrow and => is a fat arrow) and also called a lambda function (because of other languages). Another commonly used feature is the fat arrow function ()=>something . The motivation for a fat arrow is: You don't need to

1. Keep typing function
2. It lexically captures the meaning of this
3. It lexically captures the meaning of arguments

Answer 2

As I investigate further in Angular, I found that this type of calling the service is Async and it's normal to show that "Cannot read property 'setRowData'" because data is not loaded completely. I just do this:

private loadQuestion() {
    this.Questions = [];
    this.managementService.getQuestions().subscribe(
         _q => {
             _q.forEach(element => {
                 this.Questions.push(element);
             });
             this.gridApi.setRowData(this.Questions);
         },(err){ blah blah }    
);