1

我正在尝试按照https://www.ag-grid.com/example-angular-third-party/?framework=all#material-design1上的示例来使用年龄

我的环境是

   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.1
node: 7.3.0
os: win32 x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0
@angular/language-service: 4.1.0

我的代码如下：

import { Component, OnInit } from '@angular/core'
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe'
import { GridOptions } from 'ag-grid'
import { AgGridCellMdInputComponent } from '../../../shared/components/ag-grid-cell-md-input/ag-grid-cell-md-input.component'
import { AgGridCellMdCheckboxComponent } from '../../../shared/components/ag-grid-md-checkbox/ag-grid-cell-md-checkbox.component'
import { AgGridCellMdSelectComponent } from '../../../shared/components/ag-grid-cell-md-select/ag-grid-cell-md-select.component'

@AutoUnsubscribe()
@Component(
    {
      selector: 'epimss-immunization',
      template: `
        <p>
          immunization Works!
        </p>
        <div style = "width: 800px;">
          <h2>Cell Editor with Material Design Components - Set 1</h2>

          <ag-grid-angular
              style = "width: 100%; height: 250px;"
              class = "ag-material"
              [gridOptions] = "gridOptions"

          ></ag-grid-angular>
        </div>
      `,
      styles: []
    } )
export class ImmunizationComponent implements OnInit {
  gridOptions: GridOptions
  
  constructor() {
    this.gridOptions = <GridOptions>{
      rowData: this.createRowData(),
      columnDefs: this.createColumnDefs(),
      onGridReady: () => this.gridOptions.api.sizeColumnsToFit(),
      rowHeight: 48 // recommended row height for material design data grids,
    }
  }
  
  private createColumnDefs() {
    return [
      {
        headerName: 'Disease',
        field: 'disease',
        cellEditorFramework: AgGridCellMdSelectComponent,
        cellEditorParams: {
          vegetables: [ 'BCG', 'Dipththeria', 'Measles', 'Mumps', 'Rubella', 'Typhoid', 'Whooping Cough' ]
        },
        editable: true
      },
      
      {
        headerName: 'Immunized ?',
        field: 'immunized',
        cellRendererFramework: AgGridCellMdCheckboxComponent
      },
      
      {
        headerName: 'Immunization Date',
        field: 'immunizationDate',
        cellEditorFramework: AgGridCellMdInputComponent,
        editable: true
      },
      
      {
        headerName: 'Booster ?',
        field: 'booster',
        cellRendererFramework: AgGridCellMdInputComponent
      },
      
      {
        headerName: 'Booster',
        field: 'booster',
        cellRendererFramework: AgGridCellMdCheckboxComponent
      }
    ]
  }
  
  private createRowData() {
    return []
  }
  
  ngOnInit() {
  }
}

但是，尝试运行应用程序会导致以下结果：

zone.js:567 Unhandled Promise rejection: Template parse errors:
Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'gridOptions' 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. ("            style = "width: 100%; height: 250px;"
              class = "ag-material"
              [ERROR ->][gridOptions] = "gridOptions"

          ></ag-grid-angular>

谷歌搜索和其他搜索对我解决问题没有帮助。

感谢任何帮助。

干杯

编辑1

应用模块

@NgModule(
    {
      declarations: [
        AppComponent, MenubarComponent, ToolbarComponent  //HomeComponent
      ],
      imports: [
        ...epimss_modules,
       AgGridModule.withComponents( [AgGridCellMdCheckboxComponent,
 AgGridCellMdInputComponent, AgGridCellMdRadioComponent,
 AgGridCellMdSelectComponent, ImmunizationComponent] ),
        DynamicModule.withComponents( [ ...epimss_entry_components ] ),
        
        BrowserModule,
        FlexLayoutModule,
        StoreModule.provideStore( reducer ),
        EffectsModule.run( RaceEffects ),
        RouterStoreModule.connectRouter(),
        StoreDevtoolsModule.instrumentOnlyWithExtension()
        
        //        DBModule.provideDB(schema),
      
      ],
      entryComponents: [],
      providers: [ AppStateService, StoreService, Title ],
      bootstrap: [ AppComponent ]
    } )
export class AppModule {
}
4

1 回答 1

1

检查您的app.module.ts文件并在顶部导入以下行：

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

还在导入数组中添加以下行：

AgGridModule.withComponents([])
于 2017-11-27T06:12:35.827 回答