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声明为组件变量，然后在得到响应后为 them 分配。

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

让我知道您之后是否遇到任何问题。

如何使用httpservice在gridoption内绑定ag-grid的行数据

1 个答案: