'Window'で 'getComputedStyle'を実行できませんでした：パラメータ1のタイプが 'Element'ではありません - 角度/イオニック剣道

Question

KendoUIでagnular 4.3.1とIonicを使用してチャートを作成しようとしたときにエラーが発生しました3.

は、これは私のエラーです：

> 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

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

package.json

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, 
    ... 
    ], 
    ... 
}) 

<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は、誰かが私を助けてくださいことはできますか？ご協力いただきありがとうございます。

Answer 1

あなたのindex.htmlに不具合があると思われます。スタイルなど...プラカード版に比べて...

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