意外的字符"EOF"(你的模板中是否有未转义的"{"？使用"{{'{'}}"来逃避它.)

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>

这在beta测试中运行良好我从未改变任何东西.任何见解？

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 }

工作正常：

  { foo }