使用Angula2数据绑定的HTML属性中的错误 [英] Error in html attribute using angula2 data binding

问题描述

我需要在带有索引值的html属性中添加一个#号来触发数据目标功能，我将索引值作为每个项目的ID，但是没有如何显示具有ID的#号来触发数据目标.

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.

这是我的代码

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

推荐答案

使用函数来实现此功能或内插

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

或者您可以使用插值

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

这篇关于使用Angula2数据绑定的HTML属性中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！