Reg не загрузка данных из json в AgGrid - PullRequest
Новая
       109

Reg не загрузка данных из json в AgGrid

0 голосов
/ 22 апреля 2020

Я использую Ag-grid в angular, для rowData, я использую данные из json, которые хранятся в моей папке сборок, и читаю данные с помощью Httpclient. Но данные не загружаются, и ошибка как,

ОШИБКА TypeError: Невозможно прочитать свойство 'dispose' из null

Но когда я попытался напечатать данные json в консоли, они отображаются правильно,

enter image description here

Файл .ts: 

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=[];


}

Файл шаблона: 

<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;

json file is, 

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

Да, я хочу, чтобы название колонны уже было пустым. Заранее спасибо.

1 Ответ

0 голосов
/ 26 апреля 2020

Вы указываете rowData как asyn c:

[rowData] = "rowData | asyn c"

и затем пытаетесь привязать данные к rowData

this.rowData = data;

Но переменная данных не относится к типу asyn c. тип должен быть Observable или Promise

Как написано в angular guide:

Канал asyn c подписывается на Observable или Promise и возвращает последнее выданное им значение , объяснение здесь

Вы также можете прочитать, как ag-grid предлагает связывать rowData при использовании asyn c pipe здесь

Попробуйте это соглашение:

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

...