Reg not loading of data from json in AgGrid

Question

I'm using Ag-grid in angular, for rowData I'm using data from json which is stored in my assets folder, and I'm reading the data using HttpClient. But the data is not loading and I get an error:

TypeError: Cannot read property 'dispose' of null

But when I tried to print the json data in console, it's displaying correctly:

The .ts file is:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-staticdata',
  templateUrl: './staticdata.component.html',
  styleUrls: ['./staticdata.component.css']
})
export class StaticdataComponent implements OnInit {

  constructor(private http:HttpClient) { }

  ngOnInit(): void {
    this.http.get("assets/user.json").subscribe(data =>{
      console.log(data);
      this.rowData = data;
  })
}
  columnDefs = [
    {field: 'name',header:"Name"},
    {field: 'value',header:"Value" }
];

rowData:any=[];
}

The template file is,

<ag-grid-angular 
    style="width: 500px; height: 200px;" 
    class="ag-theme-alpine"
    [rowData]="rowData | async" 
    [columnDefs]="columnDefs">
</ag-grid-angular>
<br>
<button mat-raised-button color="primary">Add</button> &nbsp;
<button mat-raised-button color="primary">Delete</button> &nbsp;
<button mat-raised-button color="primary">Save</button> &nbsp;

The json file is,

[
    {
        "name":"",
        "value":"Only laptop user"
    },
    {
        "name":"",
        "value":"Only Desktop user"
    },
    {
            "name":"",
            "value":"HVD with desktop"
    },
    {
        "name":"",
        "value":"HVD with laptop"
    },
    {
        "name":"",
        "value":"Dual assets laptop and desktop"
    }
]

Yes,I want the name column should be empty by now.

Thanks in advance.

Answer 1

You specifiy rowData as async:

[rowData]="rowData | async"

and then you try to bind data to rowData

this.rowData = data;

But data variable isn't from async type. the type should be Observable or Promise

As wrote in angular guide:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. explantation here

You can also read how ag-grid suggest to bind rowData when using async pipe here

Try this convention:

this.rowData = this.http.get("assets/user.json");