角度 ag 网格不适用于角度 5答案

【问题标题】：angular ag grid not working with angular 5角度 ag 网格不适用于角度 5
【发布时间】：2019-02-14 14:59:10
【问题描述】：

我想在我的 Angular 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.

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

【问题讨论】：

标签： angular5 ag-grid

【解决方案1】：

不如使用...

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

你用...

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

此外，您的行数据中基本上没有任何内容（地址除外）与标题的字段名称相匹配。当 AgGrid 没有匹配的标头时，它不会呈现数据。请不要尝试简单地随机插入代码。主页有一个易于访问的Get Started 页面。

【讨论】：

【解决方案2】：

你需要在 app.module 中导入这个：

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

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

【讨论】：