Ошибка Parser: получена интерполяция ({{}}), где ожидалось выражение

Я использую ng-bootstrap вместо ui-bootstrap в angular2.

Мой HTML-код выглядит следующим образом:

<ul class="list-inline">
    <li class="tag" ngb-dropdown auto-close="outsideClick" 
        *ngFor="let item of ['Elastic Search','Database Theory','CVS'];
        let $index=index;" 
        [ngClass]="{'default-tag': $index==0, 'matched-tag': $index==1, 'unmatched-tag': $index==2 }">
         <a href ngb-dropdown-toggle id="desiredSkill{{$index}}">
             <i class="bi_interface-tick following"></i> {{item}} <i class="bi_interface-more tag-menu-icon"></i>
                            </a>
               <ul class="dropdown-menu tag-menu" ngb-dropdown-menu [aria-labelledby]="desiredSkill{{$index}}">
                     <li><a href>Follow Skill</a></li>
                     <li><a href>Related Jobs</a></li>
                </ul>
     </li>
  </ul>

Но когда я запускаю свое приложение, я получаю следующую ошибку:

main.browser.ts: 25Error: Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: получена интерполяция ({{}}), где ожидалось выражение в столбце 12 в [selectedSkill {{$ index}}] в JobDescription @174: 77 ("] [ ария-labelledby] = "desiredSkill {{$ индекс}}">

"): JobDescription @174: 77 Ошибка синтаксического анализатора: неожиданный токен '{' в столбце 13 в [wantedSkill {{$ index}}] в JobDescription @174: 77 ("
] [Ария-labelledby] = "desiredSkill {{$ индекс}}"> "): JobDescription @174: 77 Невозможно выполнить привязку к 'aria-labelledby', поскольку оно не является известным свойством 'ul'. ("] [Aria-labelledby] = "requiredSkill {{$ index}}"> "): JobDescription @174: 77 Ошибка синтаксического анализатора: получена интерполяция ({{}}), где ожидалось выражение в столбце 12 в [requiredSkill {{$ index}}] в JobDescription @174: 77 ("
                <div class="row">
                  <div class="col-lg-4 col-xs-4" [ERROR ->]*ngFor="let i of [0,1,3]">
                    <img src="http://ecx.images-amazon.com/images/I/81VFU9"):

JobDescription @215: 49 Ошибка синтаксического анализатора: неожиданный токен '{' в столбце 13 в [requiredSkill {{$ index}}] в JobDescription @174: 77 ("

                <div class="row">
                  <div class="col-lg-4 col-xs-4" [ERROR ->]*ngFor="let i of [0,1,3]">
                    <img src="http://ecx.images-amazon.com/images/I/81VFU9"):

JobDescription @215: 49 Ошибка синтаксического анализатора: получена интерполяция ({{}}), где ожидалось выражение в столбце 12 в [selectedSkill {{$ index}}] в JobDescription @174: 77 ("ОШИБКА → =" main.applyJob( ) "> Подать заявку на работу ОШИБКА → =" main.applyJob() "> Подать заявку на работу] [hidden] ="! IfNotApplied "> Applied] [hidden] ="! IfNotApplied "> Applied] [hidden] ="! ifNotUploaded "> Загрузить резюме] [скрыто] ="! ifNotUploaded "> Загрузить резюме Есть вопросы об этой работе?

[ОШИБКА ->] Есть вопросы по этой работе? [ОШИБКА ->]

Ответ 1

Вы не можете использовать интерполяцию внутри стандартной привязки свойств. Там должно быть выражение.

Кажется, это должно быть:

[attr.aria-labelledby]="'desiredSkill' + $index"

или же

attr.aria-labelledby="desiredSkill{{$index}}"

Ответ 2

Я думаю, что вы забыли объявить index ngFor

*ngFor="let item of ['Elastic Search','Database Theory','CVS'];let $index=index" ...

также использовать

[attr.aria-labelledby]="desiredSkill{{$index}}"

Ответ 3

Обычно эта ошибка возникает, когда мы пытаемся реализовать привязку данных Интерполяция и Свойство к одному и тому же свойству html.

Пример:

Неправильная реализация

[disabled]= {{isDisabled}}

Правильная реализация

disabled= {{isDisabled}}

Примечание. Удалите квадратную скобку из свойства элемента html.

Ответ 4

Использовать этот

  <button class="btn btn-primary" title="Edit" (click)="showEditModal(record.id)"><i class="fa fa-edit"></i></button>

Ответ 5

В тегах ссылки используйте вот так

Использовать этот

<a  class="custom-badge status-blue" [routerLink]="'/hospital/doctorleave/'+item.Id]">Manage Leave</a> 

Вместо

<a  class="custom-badge status-blue" [routerLink]="'/hospital/doctorleave/{{item.Id}}']">Manage Leave</a> 

Ответ 6

Если вы хотите передать только значение индекса $

[attr.aria-labelledby]=" ' ' + $index"