Попытка реализовать Kendo UI angular 2 Grid Selector Error

Question

Я пытаюсь создать демонстрационное приложение с помощью Kendo, что я смог сделать с помощью Kendo UI. Теперь у меня есть требование попробовать то же самое, используя 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 { }

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

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

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

core.umd.js:2837 ИСКЛЮЧЕНИЕ: Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: "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