分析器错误:插值({{}})其中表达式是预期的

时间:2016-10-23 13:07:14

标签: angular angular-ui-bootstrap dropdown

我使用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;]                                            
  • 6 个答案:

    答案 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"