如何在 Angular 4 cli 中使用 Kendo-Grid答案

【问题标题】：How to use Kendo-Grid with Angular 4 cli如何在 Angular 4 cli 中使用 Kendo-Grid
【发布时间】：2017-06-14 11:28:20
【问题描述】：

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

【问题讨论】：

标签： angular telerik kendo-grid

【解决方案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 { }

【讨论】：