[英]How to use Kendo-Grid with Angular 4 cli
我想在Angular4上使用Kendo-Grid,但我不断得到这个错误:
Uncaught Error: Template parse errors:
'Kunden-grid' is not a known element:
1. If 'Kunden-grid' is an Angular component, then verify that it is part of this module.
2. If 'Kunden-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h1>{{title}}</h1>
<searchfield></searchfield>
[ERROR ->]<Kunden-grid></Kunden-grid>
我在http://www.telerik.com/kendo-angular-ui/getting-started/#installation下载了指南,以安装Kendo-angular-ui。 app.component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Kontaktsuche';
}
以及app.component的模板:
<h1>{{title}}</h1>
<searchfield></searchfield>
<Kunden-grid></Kunden-grid>
包含网格的组件:
import {Component} from '@angular/core';
@Component({
selector:'Kunden-grid',
template: `
<div ngIf="gridData">
<kendo-grid [data]="gridData" [height]="500">
<kendo-grid-column field="ID" title="ID" width="5%"></kendo-grid-column>
<kendo-grid-column field="Name1" title="Name" width="20%"></kendo-grid-column>
<kendo-grid-column field="PLZ" title="Plz" width="10%"></kendo-grid-column>
<kendo-grid-column field="Ort" title="Ort" width="20%></kendo-grid-column>
<kendo-grid-column field="Strasse" title="Strasse" width="15%"></kendo-grid-column>
<kendo-grid-column field="Land" title="Land" width="5%"></kendo-grid-column>
<kendo-grid-column field="Telefon1" title="Telefon" width="15%"></kendo-grid-column>
<kendo-grid-column field="Telefax" title="Telefax" width="15%"></kendo-grid-column>
</kendo-grid>
</div>
`
})
export class KundenGrid {
private gridData: any[] = [];
public setGridData(Data: any[]){
this.gridData = Data;
}
}
I changed the app.module.ts to:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SearchFieldComponent} from './searchfield.component';
import { FormsModule} from '@angular/forms';
import { searchService} from './search.service';
import { HttpModule} from '@angular/http';
import {GridModule} from '@progress/kendo-angular-grid';
@NgModule({
imports: [BrowserAnimationsModule , BrowserModule, FormsModule , HttpModule , GridModule ],
declarations: [ AppComponent,
SearchFieldComponent],
providers:[searchService],
bootstrap: [ AppComponent ]
})
export class AppModule { }
我也尝试将@ progress / kendo-angular-grid / dist / es / main.js包含在.angular-cli.json中,但这也没有帮助。 是否有类似Systemjs.cofig的东西,我必须包含kendo-grid-package?
您缺少在声明部分的app.module.ts中导入“Kunden-Grid”组件。 为克服困难,您的app.module.ts应如下所示:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { SearchFieldComponent} from './searchfield.component';
import { FormsModule} from '@angular/forms';
import { searchService} from './search.service';
import { HttpModule} from '@angular/http';
import {GridModule} from '@progress/kendo-angular-grid';
import {KundenGrid} from ./kunden-grid.component';
@NgModule({
imports: [BrowserAnimationsModule , BrowserModule, FormsModule , HttpModule , GridModule ],
declarations: [ AppComponent,
SearchFieldComponent, KundenGrid],
providers:[searchService],
bootstrap: [ AppComponent ]
})
export class AppModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.