Angular 尝试实现剑道UI角度2栅格选择器错误

我正在尝试使用剑道创建一个演示应用程序，这是我能够使用剑道用户界面完成的。现在我需要使用Angular 2剑道用户界面来尝试同样的方法。然而，我被下面的错误卡住了

我的组件代码是这样的。与剑道UI中的示例代码相同

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
    }];
}

在BookDetailComponent HTML代码中使用了网格模块选择器

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

加载

但是我得到了错误

core.umd.js:2837异常：未捕获（承诺中）：错误：模板解析错误： “网格演示”不是已知元素：

---

1.如果“我的应用程序”是一个角度组件，则验证它是否是此模块的一部分。

如果

DistributionModule

是您的通用模块。将此模块导入

AppModule

，然后应将

GridComponent

和

BookDetailComponent

添加到

分发模块的导出数组中：

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

通过这种方式，您可以实际使用
分发模块中定义的组件
您可以发布index.html和任何其他相关代码吗？
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        SharedModule,
        HttpModule,
        GridModule
    ],
    declarations: [
        BookDetailComponent,
        GridComponent
    ],
    exports : [
       BookDetailComponent,
       GridComponent
    ],
    providers: [
        DistributionService
    ]
})