Блог

Я следую руководству по Kendo для Angular2. Я создал каркас для своего проекта с помощью инструмента angular-cli. Я успешно включил реестр Progress NPM. Я успешно установил и протестировал виджет button в разделе «Начало работы» в руководстве. Затем я загрузил и протестировал несколько других компонентов, включая диаграмму, сетку, выпадающие списки и диалоговые окна. Мне не удалось заставить ни один из этих компонентов отображаться правильно:

Диалоговое окно и сетка отображали только текстовое содержимое, но не графику виджета (окно, линии, цвета и т.д.). Выпадающий список отображался в виде пустого текстового поля без стрелки выпадающего списка.

В качестве примера, вот как появился один из примеров компонента диаграммы:

линейчатая диаграмма kendo

Это мой код app.module.ts:

     import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms'; //
    import { HttpModule } from '@angular/http'; //
    import { ChartsModule } from '@progress/kendo-angular-charts';

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

    @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          FormsModule,  
          HttpModule,  
          ChartsModule
      ],
      providers: [],  //
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  

И это мой код компонента:

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

    @Component({
      selector: 'my-app',
      styleUrls: ['./../../node_modules/@progress/kendo-angular-charts/dist/npm/css/main.css'],
      template: `
            <button (click)="toggleSeries()">Toggle second series</button>
            <kendo-chart [transitions]="showTransitions">
              <kendo-chart-series>
                <kendo-chart-series-item [data]="[1, 2, 3, 5]">
                </kendo-chart-series-item>
                <kendo-chart-series-item [data]="[5, 3, 2, 1]" *ngIf="showSeries">
                </kendo-chart-series-item>
              </kendo-chart-series>
            </kendo-chart>
        `
    })
    export class AppComponent {
      private showSeries: boolean = false;
      private showTransitions: boolean = true;

      private toggleSeries() {
        this.showSeries = !this.showSeries;
        this.showTransitions = false;
      }
    }
  

РЕШЕНА ПРОБЛЕМА:
Как описано в руководстве по началу работы с Kendo, установлен styles css

     npm install -S @telerik/kendo-theme-default
  

Но вместо того, чтобы ссылаться на него из компонента, я поместил его в файл 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"
          ],
          ...