Angular ag grid не работает с angular 5

Я хочу использовать ag-grid в моем приложении angular 5 но я не могу использовать, так как это вызывает исключение в моей консоли.

Код моего компонента:

columnDefs = [
{headerName: "First Name", field: "first_name", width: 100, editable: true},
{headerName: "Last Name", field: "last_name", width: 100, editable: true},
{
    headerName: "Gender",
    field: "gender",
    width: 90,
    cellEditor: 'mySimpleCellEditor'
},
{
    headerName: "Age",
    field: "age",
    width: 70,
    cellEditor: 'mySimpleCellEditor'
},
{
    headerName: "Mood",
    field: "mood",
    width: 70,
    cellEditor: 'mySimpleCellEditor'
},
{
    headerName: "Country",
    field: "country",
    width: 100,
    cellEditor: 'mySimpleCellEditor'
},
{
    headerName: "Address",
    field: "address",
    width: 502,
    cellEditor: 'mySimpleCellEditor'
  }
  ];


  rowData = [
  {
  first_name: 'Bob', last_name: 'Harrison', gender: 'Male',
  address: '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 
  747-0763',
  mood: "Happy", country: 'Ireland'
  }, 
  ];

Мой html-код:

                <div>

                <ag-grid-angular #aggrid style="width: 100%; height: 350px;" 
                class="ag-theme-balham" 
                 [columndefs]="columnDefs"
                 [showtoolpanel]="true"
                 [rowdata]="rowData"
                 enablecolresize
                 enablesorting
                 enablefilter
                 rowheight="22"
                 rowselection="multiple">
                 </ag-grid-angular>

                 </div>

Мой код app.module.ts:

import { AgGridModule } from "ag-grid-angular/main";


imports: [
 AgGridModule.withComponents([])
 ],

Я все еще получаю указанную ниже ошибку в моей консоли, и я не могу запустить свое приложение.

(anonymous) @ bootstrap.min.js:6
 compiler.js:215 Uncaught Error: Template parse errors:
 Can't bind to 'columndefs' since it isn't a known property of 'ag-grid- 
angular'.
 1. If 'ag-grid-angular' is an Angular component and it has 'columndefs' 
 input, then verify that it is part of this module.
 2. If 'ag-grid-angular' is a Web Component then add 
 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to 
 suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' 
of this component. ("id-angular #aggrid style="width: 100%; height: 350px;" 
class="ag-theme-balham"
                 [ERROR ->][columndefs]="columnDefs"
                 [showtoolpanel]="true"
                 [rowdata]="): ng:///AppModule/GridtestComponent.html@3:21
   Can't bind to 'showtoolpanel' since it isn't a known property of 'ag- 
  grid-angular'.
  1. If 'ag-grid-angular' is an Angular component and it has 'showtoolpanel' 
  input, then verify that it is part of this module.

Я перепробовал почти все, но все еще не смог решить эту проблему.

2
0
2 853
2

Ответы 2

Как насчет того, чтобы вместо использования ...

[columndefs]="columnDefs"
[rowdata]="rowData"

Ты используешь...

[columnDefs]="columnDefs"
[rowData]="rowData"

Кроме того, практически ничто - кроме адреса - в ваших rowdata не соответствует именам полей ваших заголовков. AgGrid не будет отображать данные, если для них нет соответствующего заголовка. Пожалуйста, не пытайтесь просто вставить код наугад. На главной странице есть легко доступная страница Начать.

Вам нужно импортировать в app.module это:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
...

Другие вопросы по теме