解析器错误：在预期表达式的位置得到插值 ({{}})答案

【问题标题】：Parser Error: Got interpolation ({{}}) where expression was expected解析器错误：在预期表达式的位置得到插值 ({{}})
【发布时间】：2017-03-05 08:05:31
【问题描述】：

我在 angular2 中使用 ng-bootstrap 作为 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：模板解析错误：解析器错误：得到插值 ({{}})，其中 [desiredSkill{{$index}}] 中的第 12 列应有表达式职位描述@174:77 (" ][aria-labelledby]="desiredSkill{{$index}}">

"): JobDescription@174:77 解析器错误：JobDescription@174:77 ("
][aria-labelledby]="desiredSkill{{$index}}">

"): JobDescription@174:77 无法绑定到“aria-labelledby”，因为它不是“ul”的已知属性。 (" ][aria-labelledby]="desiredSkill{{$index}}">
"): JobDescription@174:77 解析器错误：得到插值 ({{}})，其中 [desiredSkill{{$index}}] 中的第 12 列应有表达式职位描述@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"):
职位描述@215:49 解析器错误：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"):
职位描述@215:49 解析器错误：得到插值 ({{}})，其中 [desiredSkill{{$index}}] 中的第 12 列应有表达式职位描述@174:77 (" ERROR ->="main.applyJob()">申请工作 ERROR ->="main.applyJob()">申请工作 ][hidden]="!ifNotApplied">已应用 ][hidden]="!ifNotApplied">已应用 ][hidden]="!ifNotUploaded">上传简历 ][hidden]="!ifNotUploaded">上传简历对这份工作有疑问？
[错误->] 对这份工作有疑问吗？ [错误->]

【问题讨论】：

标签： angular angular-ui-bootstrap dropdown

【解决方案1】：

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

应该是这样的：

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

或

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

【讨论】：

【解决方案2】：

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

例子：

错误的实现

[disabled]= {{isDisabled}}

正确的实现

disabled= {{isDisabled}}

注意：去掉html元素属性中的方括号

【讨论】：

【解决方案3】：

使用这个

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

【讨论】：

【解决方案4】：

我想你忘了声明 index 的 ngFor

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

也使用，

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

【讨论】：

你可以试试[attr.aria-labelledby]="desiredSkill{{$index}}"吗？
这不是一个解决方案，如果我将它添加到 attr 然后 ngb-bootstrap 将忽略它的值，它只会将属性添加到元素中
哦，我明白了。尝试 yurzui 提供的其他答案。

【解决方案5】：

如果你只想传递 $index 值

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

【讨论】：

【解决方案6】：

在链接标签中这样使用

使用这个

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

【讨论】：