угловая сетка не работает с угловой 5 - PullRequest
Новая
       10

угловая сетка не работает с угловой 5

0 голосов
/ 10 сентября 2018

Я хочу использовать ag-grid в своем угловом приложении 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 голосов
/ 09 октября 2018

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

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

@NgModule({
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
    NO_ERRORS_SCHEMA
  ],
...
0 голосов
/ 10 сентября 2018

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

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

Вы используете ... 

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

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

...