Parser Error: Got interpolation ({{}}) where expression was expected

Question

我正在使用 ng-bootstrap 替代 angular2 中的 ui-bootstrap。

我的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: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription@174:77 Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in JobDescription@174:77 ("
][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription@174:77 Can't bind to 'aria-labelledby' since it isn't a known property of 'ul'. (" ][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription@174:77 Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in 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 Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in 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 Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ERROR ->="main.applyJob()">Apply for job ERROR ->="main.applyJob()">Apply for job ][hidden]="!ifNotApplied">Applied ][hidden]="!ifNotApplied">Applied ][hidden]="!ifNotUploaded">Upload CV ][hidden]="!ifNotUploaded">Upload CV Have questions about this job?
[ERROR ->] Have questions about this job?
[ERROR ->]

Answer 1

我想你忘了声明 index of ngFor

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

也用，

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

Answer 2

您不能在标准属性绑定中使用插值。应该有一个表达式。

似乎应该是：

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

或

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

Answer 3

通常当我们尝试在同一个 html 属性.

上同时实现插值和属性数据绑定时会发生此错误

示例：

实施错误

[disabled]= {{isDisabled}}

正确实施

disabled= {{isDisabled}}

注意：从 html 元素中删除方括号属性

Answer 4

使用这个

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

Answer 5

在link标签中这样使用

使用这个

<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>

Answer 6

如果你只想传递 $index 值

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

Parser Error: Got interpolation ({{}}) where expression was expected

Parser Error: Got interpolation ({{}}) where expression was expected

angular-ui-bootstrap

dropdown

angular