javascript - 无法在 'getComputedStyle' : parameter 1 is not of type 'Window' - Angular/Ionic kendo-chart 上执行 'Element'

Question

当我尝试使用带有 Angular 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)

测试.组件.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;
    }
}

测试.组件.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",

有人可以帮我吗？感谢您的帮助。

Answer 1

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

<style>
  html, body { overflow: hidden; }
  body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }
  my-app { display: block; width: 100%; overflow: hidden; min-height: 80px; box-sizing: border-box; padding: 30px; }
  my-app > .k-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .example-wrapper { min-height: 280px; align-content: flex-start; }
  .example-wrapper p, .example-col p { margin: 0 0 10px; }
  .example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; }
  .example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; }
  .example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }
  .event-log { margin: 0; padding: 0; max-height: 100px; overflow-y: auto; list-style-type: none; border: 1px solid rgba(0,0,0,.08); background-color: #fff; }
  .event-log li {margin: 0; padding: .3em; line-height: 1.2em; border-bottom: 1px solid rgba(0,0,0,.08); }
  .event-log li:last-child { margin-bottom: -1px;}
</style>