web-dev-qa-db-ja.com

パーサーエラー：式が必要な場所で補間（{{}}）を取得しました

Angle2の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：25エラー：テンプレート解析エラー：パーサーエラー：JobDescription @ 174：77（ "] [の[desiredSkill {{$ index}}]]の列12で式が予期されていた補間（{{}}）を取得しましたaria-labelledby] = "desiredSkill {{$ index}}">

  • "）：JobDescription @ 174：77パーサーエラー：JobDescription @ 174：77の[desiredSkill {{$ index}}]の列13に予期しないトークン '{'があります（"
    [aria-labelledby] = "desiredSkill {{$ index}}">
  • "）：JobDescription @ 174：77 'aria'の既知のプロパティではないため、 'aria-labelledby'にバインドできません。（"] [aria-labelledby] = "desiredSkill {{$ index}}">
  • "）：JobDescription @ 174：77パーサーエラー：JobDescription @ 174：77（" の[desiredSkill {{$ index}}]]の列12で式が予期されていた補間（{{}}）を取得しました
                    <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パーサーエラー：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"):

    JobDescription @ 215：49パーサーエラー：JobDescription @ 174：77（ "ERROR-> =" main.applyJob（）の[desiredSkill {{$ index}}]の列12で式が予期されていた補間（{{}}）を取得しました） ">ジョブERRORに適用-> =" main.applyJob（） ">ジョブに適用] [hidden] ="！ifNotApplied "> Applied] [hidden] ="！ifNotApplied "> Applied] [hidden] ="！ ifNotUploaded "> CVのアップロード] [hidden] ="！ifNotUploaded "> CVのアップロードこの仕事について質問がありますか？

    [エラー->]この仕事について質問がありますか？[エラー->]
angularangular-ui-bootstrapdropdown
19
Akhilesh Kumar

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

それがあるはずです：

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

または

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

通常、このエラーは、同じHTMLプロパティに内挿とプロパティデータバインディングの両方を実装しようとすると発生します。

例：

間違った実装

[disabled]= {{isDisabled}}

正しい実装

disabled= {{isDisabled}}

注：html要素のプロパティから角かっこを削除します

7
Yogesh Aggarwal

index of ngForを宣言するのを忘れたと思う

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

また、使用して、

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

これを使って

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

リンクタグではこのように使用します

これを使って

<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>
0
Arun Prasad E S

$ index値のみを渡したい場合

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