数据未使用 angular 7 填充到 ag-grid 中

Question

我正在尝试用 json 数据填充 angular 中的农业网格，但由于某些原因，数据没有绑定。我正在使用 ag-grid 社区版和 angular 7。我确保对 ag-grid 的引用是正确的。我创建了 stackblitz 示例来重现该问题

https://stackblitz.com/edit/angular-pz3gau

组件

import { Component, ViewChild } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import "ag-grid-community";
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private components;
  private rowData: any;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Athlete",
        field: "athlete"
      },
      {
        headerName: "Date",
        field: "date",
        editable: true,
        cellEditor: "datePicker"
      },
      {
        headerName: "Age",
        field: "age"
      },
      {
        headerName: "Country",
        field: "country"
      },
      {
        headerName: "Year",
        field: "year"
      },
      {
        headerName: "Sport",
        field: "sport"
      },
      {
        headerName: "Gold",
        field: "gold"
      },
      {
        headerName: "Silver",
        field: "silver"
      },
      {
        headerName: "Bronze",
        field: "bronze"
      },
      {
        headerName: "Total",
        field: "total"
      }
    ];

  }

   onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        "https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json"
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

html

 <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [components]="components"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

Answer 1

你需要改变两件事

在 app.component.html 中，将样式更改为 style="width: 500px; height: 500px;"

将 100% 作为 width/height 在这里不起作用，因为父容器没有 height/width。

您忘记导入 ag-grid 个 css 个文件。

将这 2 个文件添加到 style.css

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

现在您应该会在屏幕上看到您的数据！

数据未使用 angular 7 填充到 ag-grid 中

Data isnt populating in ag-grid using angular 7

ag-grid

angular