试图实施Kendo UI角度2网格选择器错误

我想创建一个使用Kendo的演示应用程序，我可以使用Kendo UI来做这件事。现在我需要使用Angular 2 Kendo UI来尝试相同的功能。但是，我被以下错误卡住了。试图实施Kendo UI角度2网格选择器错误

我的组件代码是这样的。与Kendo 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 
    }]; 
}

我有一个共同的模块类具有以下细节

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 EXCEPTION：未捕获（承诺）：错误：模板解析错误： 'grid-demo'不是已知的元素： 1.如果'my-app'是一个Angular组件，那么验证它是否是该模块的一部分。

来源

2016-11-29 TBA

你能发布index.html和任何其他相关代码？ –

如果DistributionModule是您的常用模块。而你把这个模块插入您的AppModule，那么你应该加入GridComponent和BookDetailComponent你DistributionModule出口阵列：

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

这样就可以实际使用中定义的组件您DistributionModule

来源

2016-11-29 11:12:59 PierreDuc

谢谢你的诀窍:) – TBA

试图实施Kendo UI角度2网格选择器错误

回答

相关问题