data-hover angular2不起作用

问题描述：

不能绑定到“数据悬停”，因为它不是“跨度”

我已经试过跨度的已知属性，分区没有运气。现有页面在很大程度上依赖于数据悬停，因此重写不是一种选择。

<a class="main-item" routerLink='{{ item?.url}}'> 
    <span class="main-item-hover" data-hover="{{item?.label}}">{{item?.label}}</span> 
</a>

这段代码工作完全没有角

编辑：

.main-item-hover:before { 
    content: attr(data-hover); 
    font-weight: 600; 
    position: absolute; 
    top: 100%; 
}

这是数据悬停是如何在CSS使用。

想法？

您是否在寻找'标题='？ –

答

尝试重写代码中使用方括号以产权为

<a class="main-item" [routerLink]="item?.url"> 
    <span class="main-item-hover" [attr.data-hover]="item?.label"> 
    {{ item?.label }} 
    </span> 
</a>

plunker结合一起：https://plnkr.co/edit/v49Qe7FInPToKXf952Et?p=preview

这是我在发布之前尝试的第一件事，同样的事情[ERROR - >] [data-hover] =“item？.label”> {{item？.label}} –

应该添加'attr'属性绑定，我更新了我的原始答案，并添加了稍微不同的CSS的plunker，只是为了显示CSS'内容' – Andriy

我完全忘记了attr。部分。我仍然不确定何时需要attr，何时不需要。哦，非常感谢很多 –

data-hover angular2不起作用

相关推荐