Question

基于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'，但我的代码无法访问它。所以我在node_modules /之后使用了什么： npm install --save @ progress / kendo-angular-grid 但结果不是网格，只是：

产品名称（0）UnitPrice（1）柴18

Answer 1

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

Answer 2

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

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

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

我可以确认网格与Webpack一起正常工作。

Answer 3

适用于网络包。在您的模块中，您必须指定如下的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

Answer 4

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

如剑道入门教程中所述，安装了样式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"
          ],
          ...

Answer 5

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

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

Answer 6

请遵循解决方案：

ng添加@ progress / kendo-angular-grid

Answer 7

Kendo UI网格在我使用systemJS（未尝试使用webpack）时可以正常使用

这就是我的组件的样子 -

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">

输出看起来像这样 -

我的环境是 -

Angular2版本：最终2.0.0

@ progress / kendo-angular-grid：0.3.3

看看这是否有帮助。

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

7 个答案: