如何使用httpservice在gridoption中绑定ag-grid的rowdata

Question

我正在使用 ag-grid 许可证版本，并希望使用服务将记录集带入网格。我正在使用 Ag-Grid gridoption 属性并初始化 rowdata 在 component.ts 类的构造函数中。但是数据没有渲染。也没有错误。请看看我的 component.ts 类。

请注意：web api 正确返回 json 数据，并且在没有 Ag-Grid 的情况下成功测试了 Angular 中的服务

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)
  )
}

如果您在此之后遇到任何问题，请告诉我。