解析器错误:在需要表达式的地方得到了插值 ({{}}) [英] Parser Error: Got interpolation ({{}}) where expression was expected

问题描述

我在 angular2 中使用 ng-bootstrap 作为 ui-bootstrap 的替代.

我的html如下:

<li class="tag" ngb-dropdown auto-close="outsideClick"*ngFor="let item of ['Elastic Search','Database Theory','CVS'];让 $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 follow"></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>相关职位</a></li>

但是当我运行我的应用程序时出现以下错误:

<块引用>

main.browser.ts:25Error: 模板解析错误:解析器错误:在 [desiredSkill{{$index}}] 中的第 12 列得到了插值 ({{}})JobDescription@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 列得到了插值 ({{}})JobDescription@174:77 ("

 
<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="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 列得到了插值 ({{}})JobDescription@174:77 ("ERROR ->="main.applyJob()">申请工作ERROR ->="main.applyJob()">申请工作][hidden]="!ifNotApplied">已应用][hidden]="!ifNotApplied">已应用][hidden]="!ifNotUploaded">上传简历][hidden]="!ifNotUploaded">上传简历对这份工作有疑问吗?

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

[错误 ->]

解决方案

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

似乎应该是:

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

或

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

I'm using ng-bootstrap as a substitute for ui-bootstrap in angular2.

My html is as follows:

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

But when I run my app I get following error:

main.browser.ts:25Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ][aria-labelledby]="desiredSkill{{$index}}">

"): JobDescription@174:77 Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in JobDescription@174:77 ("
][aria-labelledby]="desiredSkill{{$index}}">

"): JobDescription@174:77 Can't bind to 'aria-labelledby' since it isn't a known property of 'ul'. (" ][aria-labelledby]="desiredSkill{{$index}}">

"): JobDescription@174:77 Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in 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 Parser Error: Unexpected token '{' at column 13 in [desiredSkill{{$index}}] in 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 Parser Error: Got interpolation ({{}}) where expression was expected at column 12 in [desiredSkill{{$index}}] in JobDescription@174:77 (" ERROR ->="main.applyJob()">Apply for job ERROR ->="main.applyJob()">Apply for job ][hidden]="!ifNotApplied">Applied ][hidden]="!ifNotApplied">Applied ][hidden]="!ifNotUploaded">Upload CV ][hidden]="!ifNotUploaded">Upload CV Have questions about this job?

[ERROR ->] Have questions about this job?

[ERROR ->]

解决方案

You can't use interpolation inside standard property binding. There should be an expression.

Seems it should be:

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

or

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

这篇关于解析器错误:在需要表达式的地方得到了插值 ({{}})的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！