3

http://www.telerik.com/kendo-angular-ui/getting-startedに基づいて、webpack QS から始めて、ボタンが正常に表示されるようにしました。次に、http: //www.telerik.com/kendo-angular-ui/components/grid/ チュートリアルを開始しました。すべてのグリッドの例は、周りにグリッドがない単なるテキストとして表示されました。例は、systemJS でプランカーで動作するように見えました。これは @progress/kendo-angular-grid が webpack で動作しないということですか?

それとも、私が間違っていることを教えてくれるヒントですか？ありがとうございました

バニラ 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/ で whats を使用します: npm install --save @progress/kendo-angular-grid しかし、結果はグリッドではありません。

商品名(0) 単価(1) チャイ18

4

7 に答える 7

0

angular cli scaffolded プロジェクトが kendo ui コントロールのインストールに失敗しました。angular クイック スタート プロジェクトを使用してプロジェクトを作成しようとしました。kendo ui グリッド/ダイアログをインストールできましたが、何も機能していないようです。基本的なレイアウトでテキストを表示しました。ヘルプ....

于 2016-10-02T18:29:38.137 に答える
0

Webパックで動作します。モジュールでは、剣道コンポーネントを次のように指定する必要があります。

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 で定義できる any[] 配列です。

ただし、その前に、次の手順に従う必要があります。

>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
于 2016-10-12T22:16:10.257 に答える
-1

systemJSの場合、剣道UIグリッドはうまく機能します（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 バージョン: Final 2.0.0

@progress/kendo-angular-grid: 0.3.3

これが役立つかどうかを確認してください。

于 2016-10-06T11:46:40.720 に答える