数据未使用角度 7 填充在 ag-grid 中

Question

我正在尝试使用 json 数据以角度填充 ag-grid，但由于某些原因，数据没有绑定。 我正在使用 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

你需要改变的两件事

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

宽度/高度为 100% 在这里不起作用，因为父容器没有高度/宽度。

1. 你忘了导入ag-grid的css文件。

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

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

现在您应该可以在屏幕上看到您的数据了！