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

Posted 2023-02-22

【中文标题】解析器错误：在预期表达式的位置得到插值 ()

【英文标题】：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">上传简历 对这份工作有疑问？

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

【参考方案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>