解析器错误：预期表达式，但却出现了插值符号（{{}}）。

Question

我在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处得到插值符号（{{}}），期望表达式，在 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'，因为它不是 '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@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 解析器错误：在[desiredSkill{{$index}}]的第12列处得到插值（{{}}），而期望是表达式 JobDescription@174:77 (" ERROR ->="main.applyJob()">申请工作 ERROR ->="main.applyJob()">申请工作 ][hidden]="!ifNotApplied">已申请 ][hidden]="!ifNotApplied">已申请 ][hidden]="!ifNotUploaded">上传简历 ][hidden]="!ifNotUploaded">上传简历 对于这个职位有疑问？

[ERROR ->] 对于这个职位有疑问？

[ERROR ->]

- Akhilesh Kumar

Answer 1

您不能在标准属性绑定中使用插值。需要使用表达式。

看起来应该是：

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

或者

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

- yurzui

Answer 2

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

例如:

错误的实现方式

[disabled]= {{isDisabled}}

正确的实现

disabled= {{isDisabled}}

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

- Yogesh Aggarwal

---

这对我没用，它导致了error TS2322: Type 'string' is not assignable to type 'boolean'的错误，尽管属性isDisabled被定义为布尔类型。我能够通过[disabled]="isDisabled"来解决这个问题和原始问题。 - user1007074

Answer 3

使用这个

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

- Abdus Salam Azad

Answer 4

我认为您忘记声明 ngFor 的 index。

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

另外还可以使用：

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

- micronyks

---

你可以尝试使用[attr.aria-labelledby]="desiredSkill{{$index}}"吗？ - micronyks

如果我将其添加到属性中，那么ngb-bootstrap将忽略它的值，它只会将该属性添加到元素中，这不是一个解决方案。 - Akhilesh Kumar

哦，我明白了。尝试一下yurzui提供的其他答案。 - micronyks

Answer 5

如果你只想传递$index值

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

- DINESH Adhikari

Answer 6

对我来说，将这个

<img [src]="{{picture.name}}" [alt]="picture. caption"/>

改为：

<img src="{{picture.name}}" alt="picture.caption"/>

解决了问题。问题在于html/template文件中的属性src和alt周围的[]。

- Remex

Answer 7

在链接标签中使用如下格式：

使用此格式

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

- Arun Prasad E S