Angular2エラーコードを取り除いた後のテンプレート解析エラー

Question

私はng2と剣道のグリッドコンポーネントを使っています。剣道グリッドコンポーネントに別のプロパティを追加するまでは問題はありませんでしたが、今は奇妙なコンパイラのフーガ状態に陥っているようです。クロームのDevコンソールで

エラー：（ngStyle付き）

Unexpected character "a" (" 
    </kendo-grid-column> 
    </kendo-grid 
    [ERROR ->]appRowClick 
    [ngStyle]="{ 
     'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc("): ng:///FooBarModule/FooBarComponent.html@214:4 
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" 
     'width': 'calc(100vw - 130px)'}"> 

</div> 
[ERROR ->]"): ng:///FooBarModule/FooBarComponent.html@220:0 
Invalid ICU message. Missing '}'. (" 
     'width': 'calc(100vw - 130px)'}"> 

</div> 
[ERROR ->]"): ng:///FooBarModule/FooBarComponent.html@220:0 
    at syntaxError (compiler.es5.js:1690) 
    at DirectiveNormalizer.normalizeLoadedTemplate (compiler.es5.js:14132) 
    at compiler.es5.js:14118 
    at Object.then (compiler.es5.js:1679) 
    at DirectiveNormalizer.normalizeTemplateOnly (compiler.es5.js:14118) 
    at DirectiveNormalizer.normalizeTemplate (compiler.es5.js:14100) 
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.es5.js:15129) 
    at compiler.es5.js:26806 
    at Array.forEach (<anonymous>) 
    at compiler.es5.js:26805 

foo.bar.html：

<kendo-grid 
    appRowClick 
    [ngStyle]="{ 
     'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)', 
     'width': 'calc(100vw - 130px)'}" 
    [data]="gridData" 
    [selectable]="true" 
    [sortable]="true" 
    (selectionChange)="selectionChange($event)" 
    (dataStateChange)="dataStateChange($event)">...</kendo-grid> 

は、だから私は、全体の[ngStyle]入力はそれがするだろうと期待して削除します問題を解決してください、しかし私はまだエラーを受けています。コードはアプリ内の他の場所には存在しません。

問題が発生する可能性があることは誰か知りませんか？ ng serveを再起動してブラウザをリフレッシュしようとしましたが、どちらもうまくいかないようです。（ngStyleなし）

foo.bar.html：

<kendo-grid 
    appRowClick 
    [data]="gridData" 
    [selectable]="true" 
    [sortable]="true" 
    (selectionChange)="selectionChange($event)" 
    (dataStateChange)="dataStateChange($event)">...</kendo-grid> 

Answer 1

あなたはバインディング式内側改行

[ngStyle]="{ 
    'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)', 
    'width': 'calc(100vw - 130px)'}" 

はラインの他に

[ngStyle]="{ 'height': showAdditionalFilters ? 'calc(100vh - 280px)' : 'calc(100vh - 180px)', 'width': 'calc(100vw - 130px)'}"