Error in html attribute using angula2 data binding

问题:

i need a # sign in html attribute with index value to trigger data target functionality, I have index value as a id for each item but does not how display # sign with id to trigger data target.

here is my code

<span class="li-items" *ngFor="let item of menuData; let i = index;">
    <span  class="dropdown-toggle single-item" data-toggle="collapse" [attr.data-target]="i" *ngIf="item.name == 'Events' ">
         <a class="li-event">{{item.name}}  ({{item.data.length}})<span class="b-caret"></span></a>
    </span>
    <span class="inner-block collapse" [attr.id]="i">
        <span></span>
    </span>
</span>

i need a # sign here

[attr.data-target]="i"

like this

[attr.data-target]="#i"

回答1:

Use a function to achieve this or interpolation

<span  class="dropdown-toggle single-item" data-toggle="collapse" [attr.data-target]="combineText(i)" *ngIf="item.name == 'Events' ">

combineText(i){
   return '#' + i;
}

Alternatively you can use interpolation

<span  class="dropdown-toggle single-item" data-toggle="collapse" data-target="{{'#'.concat(i.toString())}}" *ngIf="item.name == 'Events' ">