我在HTML中有这个代码:
<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>
组件中的代码:
import {GridOptions} from 'ag-grid';
...
export class SampleComponent{
gridOptions: GridOptions;
}
...
app.module.ts:
import {NgModule} from "@angular/core";
import {AgGridModule} from "ag-grid-angular/main";
import {AppComponent} from "./app.component";
...
@NgModule({
declarations: [...],
imports: [
...
AgGridModule.withComponents([])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
我得到的错误的来源是什么?这是完整的错误:
错误:未捕获(在承诺中):错误:模板解析错误:无法绑定到'gridOptions',因为它不是'ag-grid-angular'的已知属性。
- 如果'ag-grid-angular'是一个Angular组件并且它有'gridOptions'输入,那么请验证它是否是该模块的一部分。
- 如果'ag-grid-angular'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息。
尝试按如下所示初始化gridOptions并查看
constructor() {
this.gridOptions = <GridOptions>{};
this.columnDefinitions = [
];
this.gridOptions = {
columnDefs: this.columnDefinitions,
enableFilter: true,
enableSorting: true,
pagination: true
};
this.rowSelection = 'single';
}
编辑
你的实际问题在这里,改变
从
<ag-grid-angular [gridOptions]="gridOptions"></ag-grig-angular>
至
<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>
您可以在cae中创建没有gridOptions的网格。请在下面找到完整代码: -
<ag-grid-angular style="width: 500px;height: 200px;" class="ag-theme-balham" [animateRows]="true" [columnDefs]="columnDefs" [enableSorting]="true" [enableFilter]="true" (gridReady)="OnGridReady($event)">