基于http://www.telerik.com/kendo-angular-ui/getting-started我开始使用webpack QS并获得显示正常的按钮 . 然后我开始了http://www.telerik.com/kendo-angular-ui/components/grid/教程 . 所有网格示例都显示为文本而没有围绕它们的网格 . 这些例子似乎适用于带有systemJS的plunker . 这是否意味着@ progress / kendo-angular-grid不能与webpack一起使用?
或者也许提示告诉我我做错了什么?谢谢
刚开始使用vanilla SystemJS,我最终获得了相同的结果 . 似乎plunker中使用的代码使用'@progress':'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress ', ' @telerik ': ' http://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik ', But my code can' t访问它 . 所以我在node_modules /之后使用了什么:npm install --save @ progress / kendo-angular-grid但是结果不是网格,只是:
产品名称(0)UnitPrice(1)Chai 18
6 回答
我的角度cli脚手架项目未能安装kendo ui控件 . 我尝试使用角度快速启动项目创建项目,我可以安装kendo ui网格/对话框,但似乎没有任何工作 . 只显示基本布局的文字 . 救命....
您应该使用@progress路径而不是@telerik路径 . @telerik仅用于演示目的 . 如果网格正确呈现(没有错误并且为您的网格生成了适当的kendo ui标记),我认为您没有正确导入样式 . 对于每个网格(和依赖项),您将需要包含css文件 .
所以在我的vendor.ts文件中,这是一个webpack条目,我添加了:
我可以确认网格与Webpack正常工作 .
它适用于Web包 . 在您的模块中,您必须指定如下的kendo组件:
然后在你的home.component.html:
gridData是您可以在home.component.ts中定义的任何[]数组
但在此之前,您应该按照以下步骤操作:
我遇到了同样的问题 . 我正在关注Kendo教程,并且按钮工作没有任何问题,但所有其他UI小部件都没有正确显示 . 我正在使用angular-cli方法并执行以下操作来解决此问题:
正如Kendo入门教程中所述,安装了样式css npm install -S @ telerik / kendo-theme-default
但是,我没有从Component引用.css,而是将它放在angular-cli.json文件中:
我有同样的问题,但仍然没有找到解决方案?我在angular-cli.json文件中添加了css . 不仅页眉和页脚模板不起作用,而且当我尝试添加GroupHeaderTemplate时,我收到以下控制台错误:“未处理的Promise拒绝:模板解析错误:无法绑定到'group',因为它不是'kendo-grid'的已知属性.1 . 如果'kendo-grid'是一个Angular组件并且它有'group'输入,那么请确认它是该模块的一部分 . “
是的,我确实添加了GridModule导入..
在系统jS(未尝试使用webpack)的情况下,Kendo UI网格对我来说很好用
这就是我的组件看起来像 -
在AppModule中,像这样导入GridModule-
在systemjs.config.js-
并在index.html-
输出看起来像这样 -
我的环境是 -
Angular2版本:最终2.0.0
@ progress / kendo-angular-grid:0.3.3
看看这是否有帮助 .