我使用ng-bootstrap替代angular2中的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:25错误:模板解析错误: 分析器错误:得到插值({{}})其中表达式在[desiredSkill {{$ index}}]中的第12列预期 JobDescription @ 174:77(&#34; ] [咏叹调-labelledby] =&#34; {desiredSkill {$索引}}&#34;&GT;
&#34;):JobDescription @ 174:77 分析器错误:意外的令牌&#39; {&#39;在JobDescription @ 174:77中的[desiredSkill {{$ index}}]第13栏(&#34;
] [咏叹调-labelledby] =&#34; {desiredSkill {$索引}}&#34;&GT;&#34;):JobDescription @ 174:77 无法绑定到“aria-labelledby”&#39;因为它不是“ul”的已知属性。 (&#34; ] [咏叹调-labelledby] =&#34; {desiredSkill {$索引}}&#34;&GT; &#34;):JobDescription @ 174:77 分析器错误:得到插值({{}})其中表达式在[desiredSkill {{$ index}}]中的第12列预期 JobDescription @ 174:77(&#34;
<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 分析器错误:意外的令牌&#39; {&#39;在JobDescription @ 174:77中的[desiredSkill {{$ index}}]第13栏(&#34;
<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(&#34; 错误 - &gt; =&#34; main.applyJob()&#34;&gt;申请工作 错误 - &gt; =&#34; main.applyJob()&#34;&gt;申请工作 ] [隐藏] =&#34;!ifNotApplied&#34;&GT;应用 ] [隐藏] =&#34;!ifNotApplied&#34;&GT;应用 ] [隐藏] =&#34;!ifNotUploaded&#34;&gt;上传简历 ] [隐藏] =&#34;!ifNotUploaded&#34;&gt;上传简历 对这份工作有疑问吗?
[错误 - &gt;] 对这份工作有疑问吗?[错误 - &gt;]
答案 0 :(得分:27)
您不能在标准属性绑定中使用插值。应该有表达。
似乎应该是:
[attr.aria-labelledby]="'desiredSkill' + $index"
或
attr.aria-labelledby="desiredSkill{{$index}}"
答案 1 :(得分:2)
我认为您忘记声明 index
的 ngFor
*ngFor="let item of ['Elastic Search','Database Theory','CVS'];let $index=index" ...
也用,
[attr.aria-labelledby]="desiredSkill{{$index}}"
答案 2 :(得分:2)
通常,当我们尝试在同一个html属性上同时实现插值和属性数据绑定时,就会发生此错误。
示例:
执行错误
[disabled]= {{isDisabled}}
正确实施
disabled= {{isDisabled}}
注意:从html元素属性中删除方括号
答案 3 :(得分:1)
使用此
<button class="btn btn-primary" title="Edit" (click)="showEditModal(record.id)"><i class="fa fa-edit"></i></button>
答案 4 :(得分:0)
在链接标记中的用法如下
使用此
<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>
答案 5 :(得分:0)
如果您只想传递$ index值
[attr.aria-labelledby]=" ' ' + $index"