Question

我正在将我的角度2应用从beta 9升级到RC5，我在表单模板中收到此错误。

这是完整的错误

zone.js:461 Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
    </div>
  </div>
</section>
[ERROR ->]"): ParametersFormComponent@186:0
Invalid ICU message. Missing '}'. ("arr">
        <p>{{ pa }}</p>
        <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>
      </li>

"): ParametersFormComponent@158:70
Unexpected closing tag "button" ("    <p>{{ pa }}</p>
        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>
      </li>

"): ParametersFormComponent@158:80
Unexpected closing tag "li" ("/p>
        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>
      [ERROR ->]</li>

      <pre>{ Restrict Operator } parameters</pre>
"): ParametersFormComponent@159:6
Invalid ICU message. Missing '}'. ("arr">
        <p>{{ la }}</p>
        <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>
      </li>

"): ParametersFormComponent@170:70
Unexpected closing tag "button" ("{{ la }}</p>
        <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>
      </li>

"): ParametersFormComponent@170:87
Unexpected closing tag "li" ("     <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>
      [ERROR ->]</li>

      <pre>{ xInitial } parameters</pre>
"): ParametersFormComponent@171:6
Invalid ICU message. Missing '}'. ("
    </div>
  </div>
</section>
[ERROR ->]"): ParametersFormComponent@186:0 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Unexpected character "EOF" …tion>↵[ERROR ->]"): ParametersFormComponent@186:0", stack: "Error: Template parse errors:↵Unexpected character…ttp://localhost:4200/polyfills.bundle.js:3385:38)"}message: "Template parse errors:↵Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("↵    </div>↵  </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>↵      </li>↵↵"): ParametersFormComponent@158:70↵Unexpected closing tag "button" ("    <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>↵      </li>↵↵"): ParametersFormComponent@158:80↵Unexpected closing tag "li" ("/p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ Restrict Operator } parameters</pre>↵"): ParametersFormComponent@159:6↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>↵      </li>↵↵"): ParametersFormComponent@170:70↵Unexpected closing tag "button" ("{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>↵      </li>↵↵"): ParametersFormComponent@170:87↵Unexpected closing tag "li" ("     <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ xInitial } parameters</pre>↵"): ParametersFormComponent@171:6↵Invalid ICU message. Missing '}'. ("↵    </div>↵  </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0"stack: "Error: Template parse errors:↵Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("↵    </div>↵  </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>↵      </li>↵↵"): ParametersFormComponent@158:70↵Unexpected closing tag "button" ("    <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>↵      </li>↵↵"): ParametersFormComponent@158:80↵Unexpected closing tag "li" ("/p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ Restrict Operator } parameters</pre>↵"): ParametersFormComponent@159:6↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>↵      </li>↵↵"): ParametersFormComponent@170:70↵Unexpected closing tag "button" ("{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>↵      </li>↵↵"): ParametersFormComponent@170:87↵Unexpected closing tag "li" ("     <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ xInitial } parameters</pre>↵"): ParametersFormComponent@171:6↵Invalid ICU message. Missing '}'. ("↵    </div>↵  </div>↵</section>↵[ERROR ->]"): ParametersFormComponent@186:0↵    at new BaseException (http://localhost:4200/main.bundle.js:3322:23)↵    at TemplateParser.parse (http://localhost:4200/main.bundle.js:14533:19)↵    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:32136:51)↵    at http://localhost:4200/main.bundle.js:32064:83↵    at Set.forEach (native)↵    at compile (http://localhost:4200/main.bundle.js:32064:47)↵    at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:3352:29)↵    at Zone.run (http://localhost:4200/polyfills.bundle.js:3245:44)↵    at http://localhost:4200/polyfills.bundle.js:3600:58↵    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:3385:38)"__proto__: ErrorconsoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494

和html文件

<section class="container-fluid">
  <div class="col-sm-8">
    <h1>Parameters Form</h1>
    <form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="parameters-form">
      <fieldset>
        <div class="form-inline">
          <div class="form-group">
            <label for="numberOfModelParameters">Number of Model Parameters(n)</label>
            <input type="number" #n
                   id="numberOfModelParameters"
                   class="form-control"
                   placeholder="numberOfModelParameters Param"
                   [ngFormControl]="myForm.controls['numberOfModelParameters']">
          </div>
          <div class="form-group">
            <label for="numberOfModelVariables">Number of Model Variables(m)</label>
            <input type="number" #m
                   id="numberOfModelVariables"
                   class="form-control"
                   placeholder="numberOfModelVariables Param"
                   [ngFormControl]="myForm.controls['numberOfModelVariables']">
          </div>
        </div>

        <div class="form-inline">
          <div class="form-group">
            <label for="systemParameters">System Parameters</label>
            <input type="text"
                   id="systemParameters"
                   class="form-control"
                   placeholder="systemParameters Param"
                   [ngFormControl]="systemParameters"
                   (keypress)="addToArray($event, systemParameters.value, 'systemParameters')">
          </div>
          <div class="form-group">
            <label for="restrictOperator">Restrict Operator</label>
            <input type="text"
                   id="restrictOperator"
                   class="form-control"
                   placeholder="restrictOperator Param"
                   [ngFormControl]="myForm.controls['restrictOperator']"
                   (keypress)="addToArray($event, restrictOperator.value, 'restrictOperator')">
          </div>
        </div>

        <div class="form-inline">
          <div class="form-group">
            <label for="param">Param</label>
            <input type="number"
                   id="param"
                   class="form-control"
                   placeholder="param"
                   [ngFormControl]="myForm.controls['param']"
                   (keypress)="addToArray($event, param.value, 'param')">
          </div>
          <div class="form-group">
            <label for="liftOperator">Lift Operator</label>
            <input type="text"
                   id="liftOperator"
                   class="form-control"
                   placeholder="liftOperator Param"
                   [ngFormControl]="myForm.controls['liftOperator']"
                   (keypress)="addToArray($event, liftOperator.value, 'liftOperator')">
          </div>
        </div>

        <div class="form-inline">
          <div class="form-group">
            <label for="netLogoFile">Net Logo File</label>
            <input type="text"
                   id="netLogoFile"
                   class="form-control"
                   placeholder="netLogoFile Param"
                   [ngFormControl]="myForm.controls['netLogoFile']">
          </div>

          <div class="form-group">
            <label for="xInitial">xInitial</label>
            <input type="number"
                   id="xInitial"
                   class="form-control"
                   placeholder="xInitial Param"
                   [ngFormControl]="myForm.controls['xInitial']"
                   (keypress)="addToArray($event, xInitial.value, 'xInitial')">
          </div>
        </div>
      </fieldset>


      <fieldset>
        <div class="form-inline">
          <div class="form-group">
            <label for="realisations">Realisations</label>
            <input type="number"
                   id="realisations"
                   class="form-control"
                   placeholder="Realisations Param"
                   [ngFormControl]="myForm.controls['realisations']">
          </div>

        </div>


        <div class="form-group">
          <label for="NumConstSteps">Number of Constant Steps</label>
          <input type="number"
                 id="NumConstSteps"
                 class="form-control"
                 placeholder="NumConstSteps Param"
                 [ngFormControl]="myForm.controls['numConstSteps']">
        </div>

        <div class="form-group">
          <label for="timeHorizon">Time Horizon</label>
          <input type="number"
                 id="timeHorizon"
                 class="form-control"
                 placeholder="timeHorizon Param"
                 [ngFormControl]="myForm.controls['timeHorizon']">
        </div>

        <div class="form-group">
          <label for="continuationStep">Continuation Step</label>
          <input type="number"
                 id="continuationStep"
                 class="form-control"
                 placeholder="continuationStep Param"
                 [ngFormControl]="myForm.controls['continuationStep']">
        </div>

        <div class="form-group">
          <label for="continuationStepSign">Continuation Step Sign (+,-)</label>
          <input type="text"
                 id="continuationStepSign"
                 class="form-control"
                 placeholder="continuationStep sign"
                 [ngFormControl]="myForm.controls['continuationStepSign']">
        </div>

      </fieldset>

      <button [disabled]="!isFullfilled(m.value, n.value) || !myForm.valid" type="submit" class="btn btn-success">Submit</button>
      <!-- <button type="submit" class="btn btn-success">Submit</button> -->

    </form>
  </div>

  <div class="col-sm-4">
    <div class="parameter-values-display" *ngIf="system_arr.length != 0 || param_arr.length != 0 || restrict_arr.length != 0 || lift_arr.length != 0 || xinitial_arr.length != 0">
      <pre>{ System } parameters</pre>
      <li class="parameters" *ngFor="#sa of system_arr">
        <p>{{ sa }}</p>
        <button class="destroy" type="button" (click)="deleteItem(sa, 'systemParameters')"></button>
      </li>

      <pre>{ Param } Parameters</pre>
      <li class="parameters" *ngFor="#pa of param_arr">
        <p>{{ pa }}</p>
        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>
      </li>

      <pre>{ Restrict Operator } parameters</pre>
      <li class="parameters" *ngFor="#ra of restrict_arr">
        <p>{{ ra }}</p>
        <button class="destroy" type="button" (click)="deleteItem(ra, 'restrictOperator')"></button>
      </li>

      <pre>{ Lift Operator } parameters</pre>
      <li class="parameters" *ngFor="#la of lift_arr">
        <p>{{ la }}</p>
        <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>
      </li>

      <pre>{ xInitial } parameters</pre>
      <li class="parameters" *ngFor="#xa of xinitial_arr">
        <p>{{ xa }}</p>
        <button class="destroy" type="button" (click)="deleteItem(xa, 'xInitial')"></button>
      </li>

      <div class="response-wrapper">
        <label>Response</label>
        <pre><span>{{ response | json }}</span></pre>
      </div>
    </div>
  </div>
</section>

这在测试版上运行良好我从未改变过任何事情。有什么见解吗？

Answer 1

我认为正如您在上面发布的错误中提到的那样

你的模板中有未转义的“{”吗？使用“{{'{'}}”）逃避它。

你必须像这样使用它

 <pre>{{ '{' }} System {{'}'}}

而不是

<pre>{ System } parameters</pre>

Answer 2

也发生在我身上。就我而言，我注意到我有一个非封闭的<textarea>标签，如下所示：（使用棱角材料）

<textarea mat-input [(ngModel)]="todoItem.content" name="content">

像这样关闭标签时：

<textarea mat-input [(ngModel)]="todoItem.content" name="content"></textarea>

问题解决了。

希望对您有帮助。

Answer 3

我们都不是那么干净的解决方案，但HTML代码是另一种选择：

休息：

  { foo }

工作正常：

  &#123; foo &#125;

Answer 4

请务必关闭所有打开的标签。我有一个类似的问题，但主要是因为跳过一个结束标记。密切关注表单输入并在必要时提供结束标记

Answer 5

在撰写技术文章，描述JSON和Angular时，我经常遇到此错误。

我的解决方案是将所有{字符替换为{，并用ngNonBindable包装整个代码段：

<pre ngNonBindable>
   &#123;
       "GetUsersCount": 13
   }
</pre>

这会使{字符正确显示在网页上，并阻止Angular尝试绑定到示例代码中的字符。

Answer 6

实际上只需要转义第一个大括号，比如

<div> {{ '{' }} I'm inside curly bracket } </div>

Answer 7

这件事发生在我身上，因为我错误地将模板网址放在scss位置并在模板位置scss url。它可能会帮助你，因为你将得到相同的错误，你不知道发生了什么

错

@Component({
    selector: 'sd-select',
    templateUrl: './select.component.scss',
    styleUrls: ['./select.component.html'],
    providers: [SELECT_VALUE_ACCESSOR],
    encapsulation: ViewEncapsulation.None
})

正确

@Component({
    selector: 'sd-select',
    templateUrl: './select.component.html',
    styleUrls: ['./select.component.scss'],
    providers: [SELECT_VALUE_ACCESSOR],
    encapsulation: ViewEncapsulation.None
})

Answer 8

这是该错误的最佳答案：

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}")

就我而言，我的标记错误不同于OP的

我的a元素没有被我的[routerLink]属性隔开，因此用于我的Angular2表达式的花括号没有被解释为对象

<a[routerLink]="['.', {
  mode: 'edit',
  tab: 'process'
}]">

因此，在我的情况下， true 解决方案是在a之后添加一个空格：

<a [routerLink]="['.', {
  mode: 'edit',
  tab: 'process'
}]">

Answer 9

另一个非理想的解决方案（如果只需要向用户显示大括号）是让CSS渲染括号。

代替

<pre>{ System } parameters</pre>

使用

.brackets:before{
  content: '{ '
}

.brackets:after{
  content: ' }'
}

<span>
  <span class="brackets">System</span>
  parameters
</span>

Answer 10

在bitbucket中合并代码时，我也遇到相同的错误。

但是，我的错误是“在HTML中添加了一个额外的内容。

<div class="col-sm-6 col-md-6 col-lg-3 mobile-margin-top-15"  "

以上是我的代码中的问题。供您参考。

Answer 11

当我在模板中使用注释时，发生了这种事。

我建议大家，从模板中一行一行地删除，以检查哪一行给您带来错误。

在我的情况下给出错误的行是： {% comment %} <p>{{ pName | uppercase }}</p> {% endcomment %}

Answer 12

有一种更简单的解决方案，不需要转义字符或两个其他解决方法，并且实际上很好用，只需使用角度功能

基本思想是，您可以将代码分配为文字模板，然后将其打印在pre标记内。

在组件上：

    this.cssString = `.ui-table table {
      border-collapse:collapse;
      width: 100%;
      table-layout: fixed;
    }`;
    this.htmlString = `<pre>
      <code class="language-html" pCode>
        {{htmlString}}
      </code>
    </pre>`;

在模板上

  <pre>
    <code class="language-css" pCode>
      {{cssString}}
    </code>
  </pre>
  <pre>
    <code class="language-css" pCode>
      {{htmlString}}
    </code>
  </pre>

将渲染

注意：pCode是ngPrime的帮助标签，用于打印代码，因此不必过多注意。

Answer 13

如果您忘记在组件链接到的模板文件的名称中添加文件扩展名，就会发生这种情况。

如写作：

@Component({
  selector: 'hi-stackoverflow',
  templateUrl: 'hi-stackoverflow.component'
})

代替：

@Component({
  selector: 'hi-stackoverflow',
  templateUrl: 'hi-stackoverflow.component.html'
})

意外的角色＆＃34; EOF＆＃34; （你的模板中是否有未转义的＆＃34; {＆＃34;？使用＆＃34; {{＆＃39; {＆＃39;}}＆＃34;）以逃避它。）

13 个答案:

错

正确