Angular 分析器错误：获取了预期表达式所在的插值（{}}）

我使用ng引导作为angular2中ui引导的替代

我的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 (" ][aria labelledby]=“desiredSkill{{{$index}}”>

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

"): JobDescription@174:77 无法绑定到'aria labelledby'，因为它不是'ul'的已知属性。（“ ][aria labelledby]=“desiredSkill{{{$index}}”>

"): JobDescription@174:77 分析器错误：获取了插值（{}），其中表达式应位于中[desiredSkill{{{$index}]的第12列 JobDescription@174：77（“

]*ngFor=“设[0,1,3]中的一个”>
JobDescription@215:49
分析器错误：中[desiredSkill{{{$index}}]的第13列出现意外标记“{”JobDescription@174：77（“


]*ngFor=“设[0,1,3]中的一个”>
JobDescription@215:49
分析器错误：获取了插值（{}），其中表达式应位于中[desiredSkill{{{$index}]的第12列
JobDescription@174:77 ("        
错误->=“main.applyJob（）”>Apply for job
错误->=“main.applyJob（）”>Apply for job
][隐藏]=“！如果未应用”>已应用
][隐藏]=“！如果未应用”>已应用
][隐藏]=“！ifNotUploaded”>上传简历
][隐藏]=“！ifNotUploaded”>上传简历
你对这份工作有什么问题吗

[错误->]
你对这份工作有什么问题吗

[错误->]
我想你忘了申报ngFor的索引

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

也用

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

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

似乎应该是：

[attr.aria labelledby]=“desiredSkill”+$index”

或

attr.aria labelledby=“desiredSkill{{{$index}”
当我们试图在同一html属性上实现插值和属性数据绑定时，通常会发生此错误

例如：

错误的实现

[disabled]= {{isDisabled}}

disabled= {{isDisabled}}

正确实施

[disabled]= {{isDisabled}}

disabled= {{isDisabled}}

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

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

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

链接标记中的使用方式如下

用这个

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

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

管理休假
如果只想传递$index值

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

你能试试
[attr.aria labelledby]=“desiredSkill{{{$index}}”
吗？如果我将它添加到attr中，那么ngb引导将忽略它的值，它将只是添加属性到元素哦，我看到了。试试yurzui提供的其他答案。