[解決済み] パーサエラーです。式が期待される場所で補間({{}})を得た

質問

angular2でui-bootstrapの代用としてng-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: テンプレートパースエラーです。 Parser Error: の[diredSkill{{$index}}]のカラム12で式が期待された補間({{}})を取得しました。 JobDescription@174:77 (" ][aria-labelledby]="desiredSkill{{$index}}">

"）。JobDescription@174:77 パーサエラーです。JobDescription@174:77 の [desiredSkill{$index}}] の 13 列目で予期しないトークン '{' が発生しました ("
][aria-labelledby]="希望するSkill{{$index}}">.Skill{{$index}}とする。

"）。JobDescription@174:77 aria-labelledby' は 'ul' の既知のプロパティではないため、バインドすることができません。(" ][aria-labelledby]="希望するSkill{{$index}}">

"）。JobDescription@174:77 パーサエラーです。の [desiredSkill{{$index}}] の 12 列目で式が期待される補間 ({{}}) が発生しました。 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 パーサエラーです。JobDescription@174:77 の [desiredSkill{$index}}] の 13 列目で予期しないトークン '{' が発生しました ("

                <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 列目で式が期待されるところ、補間 ({{}}) が発生しました。 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 この仕事について質問がありますか？

[ERROR ->】をご覧ください。］ この仕事について質問がありますか？

[ERROR ->]

解決方法は？

標準的なプロパティ・バインディングの内部で補間を使用することはできません。式が必要です。

そうでなければならないようだ。

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

または

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