Javascript 未能执行'；getComputedStyle'；在'；窗口'；：参数1的类型不是'；元素'；-角度/离子剑道图

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

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",

---

有人能帮我吗？谢谢您的帮助。

我怀疑您的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>

html，正文{溢出：隐藏；}
正文{字体系列：“RobotoRegular”，Helvetica，Arial，无衬线；字体大小：14px；边距：0；}
我的应用程序{显示：块；宽度：100%；溢出：隐藏；最小高度：80px；框大小：边框框；填充：30px；}
my app>.k-loading{位置：绝对；顶部：50%；左侧：50%；变换：平移（-50%，-50%）；}
.example包装器{最小高度：280px；对齐内容：flex start；}
.example wrapper p，.example col p{margin:0 10px；}
.example wrapper p:first child，.example col p:first child{margin top:0；}
.示例列{显示：内联块；垂直对齐：顶部；右填充：20px；底部填充：20px；}
.example config{margin:0 0 20px；padding:20px；背景色：rgba（0,0,0.03）；边框：1px实心rgba（0,0,0.08）；}
.event log{margin:0；padding:0；最大高度：100px；overflow-y:auto；列表样式类型：无；边框：1px实心rgba（0,0,0,08）；背景色：#fff；}
.event log li{边距：0；填充：.3em；线条高度：1.2em；边框底部：1px实心rgba（0,0,0.08）；}
.event log li:最后一个子项{margin bottom:-1px；}

我怀疑您的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>

html，正文{溢出：隐藏；}
正文{字体系列：“RobotoRegular”，Helvetica，Arial，无衬线；字体大小：14px；边距：0；}
我的应用程序{显示：块；宽度：100%；溢出：隐藏；最小高度：80px；框大小：边框框；填充：30px；}
my app>.k-loading{位置：绝对；顶部：50%；左侧：50%；变换：平移（-50%，-50%）；}
.example包装器{最小高度：280px；对齐内容：flex start；}
.example wrapper p，.example col p{margin:0 10px；}
.example wrapper p:first child，.example col p:first child{margin top:0；}
.示例列{显示：内联块；垂直对齐：顶部；右填充：20px；底部填充：20px；}
.example config{margin:0 0 20px；padding:20px；背景色：rgba（0,0,0.03）；边框：1px实心rgba（0,0,0.08）；}
.event log{margin:0；padding:0；最大高度：100px；overflow-y:auto；列表样式类型：无；边框：1px实心rgba（0,0,0,08）；背景色：#fff；}
.event log li{边距：0；填充：.3em；线条高度：1.2em；边框底部：1px实心rgba（0,0,0.08）；}
.event log li:最后一个子项{margin bottom:-1px；}

this.series=this.series；this.categories=this.categories；这并没有实现任何您可能想在此处提交的问题：-是plunker的问题。。将其应用程序模块与您的应用程序模块进行密切比较。。他们奇怪地拥有HttpModule。不知道为什么…this.series=this.series；this.categories=this.categories；这并没有实现任何您可能想在此处提交的问题：-是plunker的问题。。将其应用程序模块与您的应用程序模块进行密切比较。。他们奇怪地拥有HttpModule。不知道为什么…我也有同样的问题。你能分享一下你对这个问题所做的修复吗。我是在一个子模块上做的。它可以与父模块配合使用。但是，我需要一个儿童模块我很久以前就回答了，我忘了。现在来看，我认为这更可能是一个铸造问题。类似于这样的东西：也看这里-是窗口而不是窗口吗？我也有同样的问题。你能分享一下你对这个问题所做的修复吗。我是在一个子模块上做的。它可以与父模块配合使用。但是，我需要一个儿童模块我很久以前就回答了，我忘了。现在来看，我认为这更可能是一个铸造问题。类似这样的东西：也在看这里——是窗户而不是窗户吗？