node.js - 'ag-grid-angular' 不是已知元素:
问题描述
我已经使用 ag-grid 几个月了。今天,我尝试在这个 Angular 模板中集成我在之前的项目中成功构建的网格:
ngx-admin
模板是这样的:
我试图在包含网格的额外组件中添加另一个页面:
但是,正如您所见,模板没有被渲染。
这是项目中的额外组件文件夹:
行动计划.component.html
<!-- I have tested this with a normal Angular project and it worked perfectly -->
ahmed
<ag-grid-angular
style="width: 100% ; height: 1000px;"
[rowData]="actionPlanPartiesrowData"
[columnDefs]="actionPlanPartiescolumnDefs"
(gridReady)="actionPlanPartiesonGridReady($event)"
[getRowHeight]="getRowHeight"
[animateRows]="true"
[defaultColDef]="defaultColDef"
(cellValueChanged)="onactionPlanPartiesCellValueChanged($event)"
>
</ag-grid-angular>
行动计划.component.ts
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-action-plan",
templateUrl: "./action-plan.component.html",
styleUrls: ["./action-plan.component.css"]
})
export class ActionPlanComponent implements OnInit {
private actionPlangridApi;
actionPlanPartiescolumnDefs = [
{
headerName: "Id",
field: "id",
editable: true,
width: 100
},
{
headerName: "Project",
field: "project",
editable: true,
width: 400
},
{
headerName: "Risk ID",
field: "riskId",
editable: true,
width: 300
},
{
headerName: "ISO 27001",
field: "iso27001",
editable: true,
width: 150
},
{
headerName: "Priority",
field: "priority",
editable: true,
width: 150
},
{
headerName: "Project Owner",
field: "projectOwner",
editable: true,
width: 150
},
{
headerName: "Estimated Cost",
field: "estimatedCost",
editable: true,
width: 150
}
];
actionPlanPartiesrowData = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
defaultColDef = {
sortable: true,
resizable: true,
filter: true
};
ngOnInit() {}
constructor() {}
actionPlanPartiesonGridReady(params) {
}
onactionPlanPartiesCellValueChanged(params) {
}
public getRowHeight(params) {
return 130;
}
}
额外组件.module.ts
import { NgModule } from '@angular/core';
import { TreeModule } from 'angular-tree-component';
import { ToasterModule } from 'angular2-toaster';
import { ThemeModule } from '../../@theme/theme.module';
import { ExtraComponentsRoutingModule } from './extra-components-routing.module';
// components
import { ExtraComponentsComponent } from './extra-components.component';
import { TreeComponent } from './tree/tree.component';
import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component';
import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component';
import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component';
import { SpinnerColorComponent } from './spinner/spinner-color/spinner-color.component';
import { SpinnerComponent } from './spinner/spinner.component';
import {
InteractiveProgressBarComponent,
} from './progress-bar/interactive-progress-bar/interactive-progress-bar.component';
import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { AlertComponent } from './alert/alert.component';
import { ChatComponent } from './chat/chat.component';
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
import { CalendarComponent } from './calendar/calendar.component';
import { DayCellComponent } from './calendar/day-cell/day-cell.component';
import { StepperComponent } from './stepper/stepper.component';
import { ListComponent } from './list/list.component';
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
import { AccordionComponent } from './accordion/accordion.component';
import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component';
import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component';
// service
import { NewsService } from './services/news.service';
import { ActionPlanComponent } from './ahmed/action-plan.component';
import { AgGridModule } from 'ag-grid-angular';
const COMPONENTS = [
ExtraComponentsComponent,
TreeComponent,
AlertComponent,
ProgressBarComponent,
InteractiveProgressBarComponent,
SpinnerComponent,
SpinnerColorComponent,
SpinnerSizesComponent,
SpinnerInButtonsComponent,
SpinnerInTabsComponent,
CalendarComponent,
DayCellComponent,
ChatComponent,
TabsComponent,
Tab1Component,
Tab2Component,
StepperComponent,
ListComponent,
InfiniteListComponent,
NewsPostComponent,
NewsPostPlaceholderComponent,
AccordionComponent,
NebularFormInputsComponent,
NebularSelectComponent,
CalendarKitFullCalendarShowcaseComponent,
CalendarKitMonthCellComponent,
ActionPlanComponent
];
const SERVICES = [
NewsService,
];
const MODULES = [
];
@NgModule({
imports: [
ThemeModule,
ExtraComponentsRoutingModule,
TreeModule,
ToasterModule.forRoot(),
AgGridModule.withComponents([
])
],
declarations: [
...COMPONENTS,
],
providers: [
...SERVICES,
],
})
export class ExtraComponentsModule { }
其他人也面临与我相同的问题,但提供的解决方案是将 ag-grid-angular 导入到我所做的 app.module.ts 中。但是,它并没有解决问题。(在我的情况下,extra-components.module.ts)项目中还有其他 module.ts 文件位于更高级别的文件夹中,我还在其中导入了 ag-grid-angular 模块以防万一:
这是 VSCode 中出现的内容:
'ag-grid-angular' 不是已知元素: 1. 如果 'ag-grid-angular' 是 Angular 组件,则验证它是否是该模块的一部分。2. 如果“ag-grid-angular”是一个 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。Angular 不能绑定到“getRowHeight”,因为它不是'ag-grid-angular' 的已知属性。1. 如果 'ag-grid-angular' 是一个 Angular 组件并且它有 'getRowHeight' 输入,那么验证它是这个模块的一部分。2. 如果“ag-grid-angular”是一个 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。3. 允许任何属性添加 'NO_ERRORS_SCHEMA' 到 '@NgModule.schemas'
解决方案
这只是一个小修复,导入BrowserAnimationsModule和FormsModule将解决问题,也就是说,如果您按照https://www.ag-grid.com/angular-grid/#add-ag-grid-to上的程序进行操作-你的项目
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
AgGridModule.withComponents([]),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
推荐阅读
- c# - BooleanToVisibilityConverter 在 true 或 null 时转换为 Visible,在 false 时转换为 Collapsed
- react-native - 当前位置适用于 long 和 lat 空值,但不适用于 IOS?
- c# - 从多个 OledbConnections 动态填充和附加数据到一个 OleDbDataAdapter
- r - 变量作为 data.table 聚合列表中的名称
- javascript - 简单的 Javascript OOP 混淆
- php - 方法 some_method() 总是返回 false
- swift - 如何使用新的实时数据更新所有注入的对象
- javascript - 为什么我的端点的数据不会在成功的身份验证后显示在浏览器上?
- c - RMS 计算 DC 偏移
- dictionary - __repr__ 和 repr 有什么区别?