使用 angula2 数据绑定的 html 属性中出错

Question

我需要带有索引值的 # 登录 html 属性来触发数据目标功能，我将索引值作为每个项目的 id，但不知道如何显示带有 id 的 # 符号来触发数据目标。

这是我的代码

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

我在这里需要一个#符号

[attr.data-target]="i"

喜欢这个

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

Answer 1

使用函数来实现此值或插值

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

或者，您可以使用插值

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