首页 文章

Angular 2 @ progress / kendo-angular-grid不适用于webpack?

提问于
浏览
3

基于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 回答

  • 0

    我的角度cli脚手架项目未能安装kendo ui控件 . 我尝试使用角度快速启动项目创建项目,我可以安装kendo ui网格/对话框,但似乎没有任何工作 . 只显示基本布局的文字 . 救命....

  • 0

    您应该使用@progress路径而不是@telerik路径 . @telerik仅用于演示目的 . 如果网格正确呈现(没有错误并且为您的网格生成了适当的kendo ui标记),我认为您没有正确导入样式 . 对于每个网格(和依赖项),您将需要包含css文件 .

    所以在我的vendor.ts文件中,这是一个webpack条目,我添加了:

    import '../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css';
    

    我可以确认网格与Webpack正常工作 .

  • 0

    它适用于Web包 . 在您的模块中,您必须指定如下的kendo组件:

    import { NgModule, ApplicationRef } from '@angular/core';
    ..........
    import { GridModule } from '@progress/kendo-angular-grid'; 
    
    @NgModule({
      bootstrap: [ App ],
      declarations: [ App,About,Home,XLarge],
      imports: [  BrowserModule, FormsModule, HttpModule, GridModule, RouterModule.forRoot(ROUTES, { useHash: true }) ],
      providers: [ // expose our Services and Providers into Angular's dependency injection
            ENV_PROVIDERS,
            APP_PROVIDERS
          ]
    })
    export class AppModule {
          constructor(public appRef: ApplicationRef, public appState: AppState) {}  
    }
    

    然后在你的home.component.html:

    <kendo-grid 
        [data]="gridData"
        [scrollable]="'virtual'"
        [rowHeight]="36"
        [height]="300"> 
    </kendo-grid>
    

    gridData是您可以在home.component.ts中定义的任何[]数组

    但在此之前,您应该按照以下步骤操作:

    >npm login --registry=https://registry.npm.telerik.com/ --scope=@progress
    >Username : *******
    >Password  : *****
    >Email       : your email
    
    
    >npm install --save @progress/kendo-angular-grid
    
    you can also install other component like this
    
    >npm install --save @progress/kendo-angular-buttons
    >npm install --save @progress/kendo-angular-dropdowns
    >npm install --save @progress/kendo-angular-charts
    
    >npm install
    >npm start
    
  • 0

    我遇到了同样的问题 . 我正在关注Kendo教程,并且按钮工作没有任何问题,但所有其他UI小部件都没有正确显示 . 我正在使用angular-cli方法并执行以下操作来解决此问题:

    正如Kendo入门教程中所述,安装了样式css npm install -S @ telerik / kendo-theme-default

    但是,我没有从Component引用.css,而是将它放在angular-cli.json文件中:

    {
          "project": {
            "version": "1.0.0-beta.17",
            "name": "kairos-cli"
          },
          "apps": [
            {
              "root": "src",
              "outDir": "dist",
              "assets": "assets",
              "index": "index.html",
              "main": "main.ts",
              "test": "test.ts",
              "tsconfig": "tsconfig.json",
              "prefix": "app",
              "mobile": false,
              "styles": [
                "styles.css",
                "../node_modules/@telerik/kendo-theme-default/dist/all.css"
              ],
              ...
    
  • -1

    我有同样的问题,但仍然没有找到解决方案?我在angular-cli.json文件中添加了css . 不仅页眉和页脚模板不起作用,而且当我尝试添加GroupHeaderTemplate时,我收到以下控制台错误:“未处理的Promise拒绝:模板解析错误:无法绑定到'group',因为它不是'kendo-grid'的已知属性.1 . 如果'kendo-grid'是一个Angular组件并且它有'group'输入,那么请确认它是该模块的一部分 . “

    是的,我确实添加了GridModule导入..

  • 0

    在系统jS(未尝试使用webpack)的情况下,Kendo UI网格对我来说很好用

    这就是我的组件看起来像 -

    import { Component } from '@angular/core';
    
    @Component({
        selector: 'my-app',
        template: `
        <h5>My First Kendo UI grid with Angular 2 App</h5>
    
            <h5>kendo-grid</h5>
    
            <kendo-grid [data]="gridData">
                <kendo-grid-column field="ProductName">
                    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
                      {{column.field}}({{columnIndex}})
                    </template>
                </kendo-grid-column>
                 <kendo-grid-column field="UnitPrice">
                    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
                      {{column.field}}({{columnIndex}})
                    </template>
                </kendo-grid-column>
            </kendo-grid>
        `
    })
    export class AppComponent {
    
            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
        }];
    }
    

    在AppModule中,像这样导入GridModule-

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { GridModule } from '@progress/kendo-angular-grid';
    
    import { AppComponent }  from './app.component';
    
    @NgModule({
      imports: [ BrowserModule, GridModule],
      declarations: [ AppComponent ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    

    在systemjs.config.js-

    map: {
      // our app is within the app folder
      app: 'app',
    
      '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
      '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
      '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
    
      .......
    
      // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'npm:@progress/kendo-angular-grid': {
        main: './dist/npm/js/main.js',
        defaultExtension: 'js'
      },
      'npm:@progress/kendo-angular-intl': {
        main: './dist/npm/js/main.js',
        defaultExtension: 'js'
      },
      'npm:@telerik/kendo-intl': {
        main: './dist/npm/js/main.js',
        defaultExtension: 'js'
      },
      .......
    

    并在index.html-

    <link rel="stylesheet" href="../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css">
    

    输出看起来像这样 -

    kendo grid

    我的环境是 -

    Angular2版本:最终2.0.0

    @ progress / kendo-angular-grid:0.3.3

    看看这是否有帮助 .

相关问题