Question

我想在我的Angle 5应用程序中使用ag-grid 但是我无法使用，因为它会在控制台中引发异常。

我的组件代码：

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.

我几乎尝试了所有方法，但仍然无法解决此问题。

Answer 1

而不是使用...

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

您使用...

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

此外，行数据中的除地址外的其他内容基本上与标题的字段名称匹配。如果没有对应的标头，则AgGrid将不会呈现数据。请不要尝试简单地随机插入代码。主页上有一个易于访问的Get Started页面。

Answer 2

您需要在app.module中导入以下内容：

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

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

角AG网格不适用于角5

2 个答案: