首页 文章

如何使用Angular 4 cli的Kendo-Grid

提问于
浏览
1

我想在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?

1 回答

  • 0

    您缺少在声明部分的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 { }
    

相关问题