Данные не заполняются в ag-grid с использованием угловых 7

Question

Я пытаюсь заполнить ag-grid в угловом формате данными json, и по некоторым причинам эти данные не являются обязательными.Я использую версию сообщества ag-grid и angular 7. Я убедился, что ссылки на ag-grid верны.Я создал пример стекаблица, чтобы воспроизвести проблему

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% ширина / высота здесь не работаетпоскольку родительский контейнер не имеет высоты / ширины.

Вы забыли импортировать CSS-файлы ag-grid.

, добавьте эти 2 файла в style.css

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

Теперь вы должны увидеть свои данные на экране!