Неожиданный символ "EOF" (у вас есть неопределенный "{" в вашем шаблоне? Используйте "{{'{'}}" ), чтобы избежать его.)

Я обновляю свое приложение angular 2 от бета 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 ->]"): [email protected]:0
Invalid ICU message. Missing '}'. ("arr">
        <p>{{ pa }}</p>
        <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>
      </li>

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

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

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

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

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

      <pre>{ xInitial } parameters</pre>
"): [email protected]:6
Invalid ICU message. Missing '}'. ("
    </div>
  </div>
</section>
[ERROR ->]"): [email protected]:0 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Unexpected character "EOF" …tion>↵[ERROR ->]"): [email protected]: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 ->]"): [email protected]:0↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>↵      </li>↵↵"): [email protected]:70↵Unexpected closing tag "button" ("    <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>↵      </li>↵↵"): [email protected]:80↵Unexpected closing tag "li" ("/p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ Restrict Operator } parameters</pre>↵"): [email protected]:6↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>↵      </li>↵↵"): [email protected]:70↵Unexpected closing tag "button" ("{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>↵      </li>↵↵"): [email protected]:87↵Unexpected closing tag "li" ("     <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ xInitial } parameters</pre>↵"): [email protected]:6↵Invalid ICU message. Missing '}'. ("↵    </div>↵  </div>↵</section>↵[ERROR ->]"): [email protected]: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 ->]"): [email protected]:0↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, [ERROR ->]'param')"></button>↵      </li>↵↵"): [email protected]:70↵Unexpected closing tag "button" ("    <p>{{ pa }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')">[ERROR ->]</button>↵      </li>↵↵"): [email protected]:80↵Unexpected closing tag "li" ("/p>↵        <button class="destroy" type="button" (click)="deleteItem(pa, 'param')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ Restrict Operator } parameters</pre>↵"): [email protected]:6↵Invalid ICU message. Missing '}'. ("arr">↵        <p>{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, [ERROR ->]'liftOperator')"></button>↵      </li>↵↵"): [email protected]:70↵Unexpected closing tag "button" ("{{ la }}</p>↵        <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')">[ERROR ->]</button>↵      </li>↵↵"): [email protected]:87↵Unexpected closing tag "li" ("     <button class="destroy" type="button" (click)="deleteItem(la, 'liftOperator')"></button>↵      [ERROR ->]</li>↵↵      <pre>{ xInitial } parameters</pre>↵"): [email protected]:6↵Invalid ICU message. Missing '}'. ("↵    </div>↵  </div>↵</section>↵[ERROR ->]"): [email protected]: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>

это отлично работает в бета-версии, с тех пор я ничего не изменил. Любое понимание?

ОТВЕТЫ

Ответ 1

Я думаю, что это упоминание в ошибке, которую вы опубликовали выше

У вас есть неэкранированный "{" в вашем шаблоне? Используйте "{{'{'}}"), чтобы избежать этого.

Вы должны использовать это так

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

вместо

<pre>{ System } parameters</pre>

Ответ 2

Случилось и со мной тоже. В моем случае я заметил, что у меня есть закрытый тег <textarea>, например: (используя angular материал)

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

При закрытии тега вот так:

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

проблема была решена.

Я надеюсь, что это помогает.

Ответ 3

Не то, чтобы чистое решение мы все ищем, но HTML-коды являются альтернативой:

Разрывы:

  { foo }

Прекрасно работает:

  &#123; foo &#125;

Ответ 4

Пожалуйста, не забудьте закрыть все открытые теги. У меня была аналогичная проблема, но это было главным образом потому, что пропустил один закрывающий тег. уделять пристальное внимание вводу формы и при необходимости закрывать теги

Ответ 5

на самом деле требуется только первая фигурная скобка, что-то вроде

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

Ответ 6

Это произошло для меня, потому что я по ошибке поместил URL файла шаблона в место styleUrls и URL файла scss в место файла шаблона. это может помочь вам быстро отладить ошибку.

неправильно

@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
})

Ответ 7

Это лучший ответ за ошибку:

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

В моем случае моя ошибка разметки отличалась от OP

Мой элемент a не был разделен моим атрибутом [routerLink], поэтому фигурные скобки, использованные для моего выражения Angular2, не были интерпретированы как объект

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

Так что в моем случае истинное решение - добавить пробел после a:

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

Ответ 8

Другое неидеальное решение (если вам просто нужно показать фигурные скобки пользователю) - позволить CSS отображать скобки.

Вместо

<pre>{ System } parameters</pre>

использовать

.brackets:before{
  content: '{ '
}

.brackets:after{
  content: ' }'
}
<span>
  <span class="brackets">System</span>
  parameters
</span>

Ответ 9

Я также сталкиваюсь с той же ошибкой при слиянии кода в bitbucket.

Но моя ошибка здесь в том, что "добавлено еще одно в HTML.

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

Выше проблема в моем коде. для вашей справки.

Ответ 10

Это случилось со мной, когда я использовал комментарии в шаблоне.

Я предлагаю вам, ребята, удалите одну строчку из вашего шаблона, чтобы проверить, какая строка выдает ошибку.

Строка, которая выдавала ошибку в моем случае: {% comment%}

{{pName | верхний регистр}}

{% endcomment%}