如何使用Angular 4 cli的Kendo-Grid

Question

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

Answer 1

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