Пытается реализовать Kendo UI угловой 2 Ошибка выбора сетки

Question

Я пытаюсь создать демонстрационное приложение с использованием Kendo, которое я смог сделать с использованием пользовательского интерфейса Kendo. Теперь у меня есть требование попробовать то же самое с помощью Angular 2 Kendo UI. Однако я был застрял в ошибке.

Мой код компонента выглядит следующим образом. То же, что и в примере кода из пользовательского интерфейса Kendo.

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <kendo-grid [data]="gridData"> 
      <kendo-grid-column field="ProductID" title="Product ID" width="120"> 
      </kendo-grid-column> 
      <kendo-grid-column field="ProductName" title="Product Name"> 
      </kendo-grid-column> 
      <kendo-grid-column field="UnitPrice" title="Unit Price" width="230"> 
      </kendo-grid-column> 
      <kendo-grid-column field="Discontinued" width="120"> 
       <template kendoCellTemplate let-dataItem> 
        <input type="checkbox" [checked]="dataItem.Discontinued" disabled/> 
       </template> 
      </kendo-grid-column> 
     </kendo-grid> 
    ` 
}) 
export class GridComponent { 

    private gridData: any[] = [{ 
     "ProductID": 1, 
     "ProductName": "Chai", 
     "UnitPrice": 18.0000, 
     "Discontinued": true 
    }, { 
     "ProductID": 2, 
     "ProductName": "Chang", 
     "UnitPrice": 19.0000, 
     "Discontinued": false 
    }, { 
     "ProductID": 3, 
     "ProductName": "Aniseed Syrup", 
     "UnitPrice": 10.0000, 
     "Discontinued": false 
    }, { 
     "ProductID": 4, 
     "ProductName": "Chef Anton's Cajun Seasoning", 
     "UnitPrice": 22.0000, 
     "Discontinued": false 
    }, { 
     "ProductID": 5, 
     "ProductName": "Chef Anton's Gumbo Mix", 
     "UnitPrice": 21.3500, 
     "Discontinued": false 
    }, { 
     "ProductID": 6, 
     "ProductName": "Grandma's Boysenberry Spread", 
     "UnitPrice": 25.0000, 
     "Discontinued": false 
    }]; 
} 

У меня есть общий класс модуля с следующими данными

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { BookDetailComponent } from './distribution-detail/distribution-detail.component'; 
import { GridComponent } from './detail-grid/detail-grid.component'; 
import { GridModule } from '@progress/kendo-angular-grid'; 


@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     SharedModule, 
     HttpModule, 
     GridModule 
    ], 
    declarations: [ 
     BookDetailComponent, 
     GridComponent 
    ], 
    providers: [ 
     DistributionService 
    ] 
}) 

export class DistributionModule { } 

И селектор сетки Модуль используется в BookDetailComponent HTML код,

<my-app>Loading</my-app> 

Однако я получаю ошибку

core.umd.js: 2837 ИСКЛЮЧЕНИЕ: Неподготовлено (в обещании): Ошибка: ошибки анализа шаблона: «grid-demo» не является известным элементом: 1. Если «my-app» является угловым компонентом, проверьте, что он является частью этого модуля.

Answer 1

Если DistributionModule - ваш общий модуль. И вы импортировать этот модуль в свой AppModule, то вы должны добавить GridComponent и BookDetailComponent на экспорт массива вашего DistributionModule:

@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     SharedModule, 
     HttpModule, 
     GridModule 
    ], 
    declarations: [ 
     BookDetailComponent, 
     GridComponent 
    ], 
    exports : [ 
     BookDetailComponent, 
     GridComponent 
    ], 
    providers: [ 
     DistributionService 
    ] 
}) 

Таким образом, вы можете использовать компоненты определены внутри вашего DistributionModule