1

「Kendo UI for Angular 2」コントロールを利用するデモ アプリケーションを構築しようとしていますが、Button コントロールしか動作しないようです。他のすべてのコントロールが正しく表示されないか、まったく表示されません。私たちが立ち上げようとしている新しい長期プロジェクトにとって、その製品がコストに見合うかどうかを判断できるように、私は本当に助けを借りることができました.

以下の例では、Angular 2 を使用してボタンとドロップダウン リストを表示しています。ボタンのみが機能します。このサンプルを機能させるのを手伝ってください。私はこれを理解しようとしてあまりにも長い時間を費やしました。ありがとう！

package.json (簡潔にするために省略)

"dependencies": {
   ...
   "@progress/kendo-angular-buttons": "^0.10.2",
   "@progress/kendo-angular-dropdowns": "^0.10.2",
   ...

systemjs.config.js (簡潔にするために省略)

map: {
  app: 'app',
  'rxjs': 'npm:rxjs',
  '@progress': 'npm:@progress',
  '@telerik': 'npm:@telerik',
  ...
},
packages: {
  "@progress/kendo-angular-dropdowns": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
  "@progress/kendo-angular-buttons": { main: './dist/npm/js/main.js', defaultExtension: 'js' },    
  '@telerik/kendo-dropdowns-common': { main: './dist/npm/js/main.js', defaultExtension: 'js' },
  ...
}

app.module.ts

// Application
import { AppComponent }  from './app.component';

// Misc Modules
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';

// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

// Test Pages
import { KButtonComponent } from './components/k.button.component'
import { KDropDownListComponent } from './components/k.dropdownlist.component'

@NgModule({
    imports: [
        BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
    declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
    providers: [],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

app.component.ts

            import { Component } from '@angular/core';

            // Kendo Controls
            import { ButtonsModule } from '@progress/kendo-angular-buttons';
            import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton (click)="onButtonClick()" [primary]=true>Button!</button> This works!
        <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist> This doesn't even display.
    `,
    styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css', '../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css' ]
})

export class AppComponent {
   listItems: Array<string> = ['This', 'is', 'really', 'upsetting'];

   onButtonClick() {
        alert('The only working Kendo component');
    }
}
4

2 に答える 2

2

コマンドを使用して、デフォルトの剣道テーマ( https://www.npmjs.com/package/@telerik/kendo-theme-default ) をインストールしますnpm install --save @telerik/kendo-theme-default。

index.html で CSS ファイルを指定すると、すべてのコントロールが意図したとおりに表示されます。

<link rel="stylesheet" href="./node_modules/@telerik/kendo-theme-default/dist/all.css">
于 2016-10-05T12:40:53.527 に答える
1

systemjs.config.js 構成を除いて、すべてが正しいように見えます。パッケージ定義は、定義したライブラリへのマップと一致する必要があります。これは私の構成であり、機能します。グリッド コンポーネントの定義をコンポーネントの定義に置き換えるだけです。

systemjs.config.js

// map tells the System loader where to look for things
map: {
    'app': 'dist',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ...
    '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl',
    '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid',
    '@telerik/kendo-intl': 'npm:@telerik/kendo-intl',
  },

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

于 2016-09-29T22:16:22.240 に答える