分析器错误:得到插值({{}}),其中表达式是预期的

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:25错误:模板解析错误:解析器错误:得到插值({{}})其中表达式在[desiredSkill {{$ index}}]的第12列中的JobDescription @ 174:77("] [咏叹调-labelledby] = "desiredSkill {{$索引}}">

"):JobDescription @ 174:77分析器错误:JobDescription @ 174:77中的[desiredSkill {{$ index}}]第13列出现意外的标记'{'("
] [aria-labelledby] ="desiredSkill {{$ index }}">

"):JobDescription @ 174:77无法绑定到'aria-labelledby',因为它不是'ul'的已知属性.("] [aria-labelledby] ="desiredSkill {{$ index}}">

"):JobDescription @ 174:77分析器错误:插值({{}})其中表达式在[desiredSkill {{$ index}}]中的第12列预期为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分析程序错误:JobDescription @ 174:77中的[desiredSkill {{$ index}}]第13列出现意外的标记"{"("

                <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分析器错误:插值({{}})其中表达式在JobDescription @ 174:77中的[desiredSkill {{$ index}}]的第12列预期("ERROR - > ="main.applyJob( )">申请工作错误 - > ="main.applyJob()">申请工作] [隐藏] ="!ifNotApplied">应用] [隐藏] ="!ifNotApplied">应用] [隐藏] ="! ifNotUploaded">上传简历] [隐藏] ="!ifNotUploaded">上传简历对这份工作有疑问？

[错误 - >]对这份工作有疑问吗？

[错误 - >]

Answer 1

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

似乎它应该是:

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

要么

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

Answer 2

通常，当我们尝试在同一个html属性上实现插值和属性数据绑定时，通常会发生此错误。

例：

实施错误

[disabled]= {{isDisabled}}

正确执行

disabled= {{isDisabled}}

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