Angular2 Template Parse Fehler nach dem Entfernen des Fehlercodes

Question

Ich arbeite mit ng2 und kendo-ui Grid-Komponente. Ich hatte keine Probleme, bis ich der Kendo-Grid-Komponente eine weitere Eigenschaft hinzufügte, und jetzt scheint ich in einem seltsamen Compiler-Fuguestatus stecken zu bleiben.

Fehler in Chrome Dev-Konsole:

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 (mit ngstyle):

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

So entferne ich die gesamte [ngstyle] Eingang erwarten, dass würde behebt das Problem, jedoch erhalte ich immer noch den Fehler. Der Code existiert nirgendwo anders in der App.

Weiß jemand, was könnte das Problem sein? Ich habe versucht, ng serve neu zu starten und Browser zu aktualisieren, aber keiner scheint zu funktionieren.

foo.bar.html (ohne ngstyle):

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

Answer 1

Sie können keine Zeilenumbrüche innerhalb Bindungsausdrücke haben

[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)'}"