无法在'Window'上执行'getComputedStyle':参数1不是'Element'类型 - Angular / Ionic kendo-chart

时间:2017-07-21 13:17:44

标签: javascript angular ionic3 kendo-ui-angular2 kendo-chart

当我尝试使用带有agnular 4.3.1和Ionic 3的KendoUI创建图表时出错。

这是我的错误:

> TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter
> 1 is not of type 'Element'.
>     at computedProp (resize-sensor.component.js:10)
>     at ResizeSensorComponent.ngAfterViewChecked (resize-sensor.component.js:53)
>     at callProviderLifecycles (core.es5.js:11183)
>     at callElementProvidersLifecycles (core.es5.js:11155)
>     at callLifecycleHooksChildrenFirst (core.es5.js:11139)
>     at checkAndUpdateView (core.es5.js:12244)
>     at callViewAction (core.es5.js:12601)
>     at execComponentViewsAction (core.es5.js:12533)
>     at checkAndUpdateView (core.es5.js:12242)
>     at callViewAction (core.es5.js:12601)

test.component.ts:

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

@Component({
  selector: 'test',
  templateUrl: 'test.component.html'
})
export class TestGraphComponent {

  private series: any[] = [{
      name: "India",
      data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
      name: "Russian Federation",
      data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
    }, {
      name: "Germany",
      data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
    },{
      name: "World",
      data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
    }];
    private categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];

    constructor() {
      this.series = this.series;
      this.categories = this.categories;
    }
}

test.component.html

<h1>Test Graph component</h1>
<kendo-chart [categoryAxis]="{ categories: categories }">
    <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
    <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series"
            type="line" style="smooth" [data]="item.data" [name]="item.name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

app.module.ts

import { ChartsModule } from '@progress/kendo-angular-charts';
import { TestGraphComponent } from '../components/test-graph/test.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

import 'hammerjs';

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ChartsModule,
    ...
  ],
  ...
})

的package.json

"@progress/kendo-angular-buttons": "^1.0.5",
"@progress/kendo-angular-charts": "^1.2.1",
"@progress/kendo-angular-dateinputs": "^1.0.5",
"@progress/kendo-angular-dropdowns": "^1.1.1",
"@progress/kendo-angular-excel-export": "^1.0.3",
"@progress/kendo-angular-grid": "^1.2.1",
"@progress/kendo-angular-inputs": "^1.0.6",
"@progress/kendo-angular-intl": "^1.2.1",
"@progress/kendo-angular-l10n": "^1.0.2",
"@progress/kendo-data-query": "^1.0.5",
"@progress/kendo-drawing": "^1.1.1",
"@progress/kendo-theme-default": "^2.38.0",
是的,有人能帮帮我吗?谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

我怀疑你的index.html缺少东西。样式等...与plunker版本相比......

<div class="ironman-nav">
    <form  action="https://website.com/<?=$name?>">
        <span>Search for username</span>
        <input type="text" name="playername">
        <input type="submit" value="Submit">
    </form>
</div>