Как связать строки данных ag-grid внутри gridoption, используя httpservice

Question

Я использую лицензионную версию ag-grid и хочу перенести набор записей в сетку с помощью сервиса. Я использую свойство grid-опции Ag-Grid и инициализирую данные строки в конструкторе класса component.ts. Но данные не отображаются. Никаких ошибок тоже нет. Пожалуйста, посмотрите мой класс component.ts.

Обратите внимание: веб-интерфейс правильно возвращает данные json, а служба в Angular успешно протестирована без Ag-Grid

import {Component, OnInit} from "@angular/core";
import {GridOptions} from "ag-grid";
import {RedComponentComponent} from "../red-component/red-component.component";
import { person } from "../Shared/models/person.model";
import {personservice} from '../service/person.service';

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent implements OnInit{
    private gridOptions: GridOptions;
    private persons: person[];
    constructor(private personservice: personservice) {
        this.gridOptions = <GridOptions>{};
        this.gridOptions.columnDefs = [
            {
                headerName: "ID",
                field: "PersonId",
                width: 100
            },
            {
                headerName: "Name",
                field: "PersonNm",
                cellRendererFramework: RedComponentComponent,
                width: 100
            },
            {
              headerName: "Email",
              field: "PersonEmail",
              cellRendererFramework: RedComponentComponent,
              width: 100
          }

        ];

        this.gridOptions.rowData = this.persons

    }
    ngOnInit() {
      this.personservice.findAll().subscribe(
          persons => {
            this.persons = persons
          },
          error => {
              console.log(error);
          }
      )
  }
}

Answer 1

Вместо предоставления columnDefs и rowData с gridOptions, попробуйте предоставить их напрямую следующим образом.

<ag-grid-angular
    [gridOptions]="gridOptions"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

Кроме того, объявите columnDefs и rowData как переменные компонента, а затем присвойте им после получения ответа.

rows: any[] = [];
columnDefs: ColDef[];

constructor(private personservice: personservice) {
    this.gridOptions = <GridOptions>{};
    this.columnDefs = [
        // your column definition goes here
    ];
}

ngOnInit() {
  this.personservice.findAll().subscribe(
      persons => {
        this.rows = persons
      },
      error => console.log(error)
  )
}

Дайте мне знать, если у вас возникнут какие-либо проблемы после этого.