Question

我正在使用ng2和kendo-ui网格组件。在我为kendo网格组件添加另一个属性之前，我没有任何问题，现在我似乎陷入了一些奇怪的编译器赋格状态。

Chrome开发者控制台出错：

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（使用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>

所以我删除了可以解决问题的整个[ngStyle]输入，但是我仍然收到错误。该代码在应用程序中的任何其他位置都不存在。

有人知道可能是什么问题吗？我尝试重新启动ng serve并刷新浏览器，但似乎都无法正常工作。

foo.bar.html（没有ngStyle）：

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

Answer 1

您无法在绑定表达式中添加换行符

(venv2) HOME1@PC C:\Builts\venv2
python --version
Python 2.7.9

应该是

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

删除错误代码后出现Angular2模板解析错误

1 个答案: