Question

我使用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;]

Answer 1

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

似乎应该是：

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

或

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

Answer 2

我认为您忘记声明 index 的 ngFor

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

也用，

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

Answer 3

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

示例：

执行错误

[disabled]= {{isDisabled}}

正确实施

disabled= {{isDisabled}}

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

Answer 4

使用此

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

Answer 5

在链接标记中的用法如下

使用此

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

Answer 6

如果您只想传递$ index值

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

分析器错误：插值（{{}}）其中表达式是预期的

6 个答案: