angular – HTML中的自定义属性绑定

发布时间：2020-12-17 17:57:25 所属栏目：安全来源：网络整理

导读：使用Angular 5,我将数据目标绑定为[attr.data-target] =“id” JavaScript对象 var ids = [1,2]; HTML div *ngFor="let id in ids" p [attr.data-target]="id"/p/div 被渲染为 div p data-target="1"/p p data-target="2"/p/div 目标是实现类似的目标 div p

使用Angular 5,我将数据目标绑定为[attr.data-target] =“id”

JavaScript对象

var ids = [1,2];

HTML

<div *ngFor="let id in ids">
    <p [attr.data-target]="id"></p>
</div>

被渲染为

<div>
    <p data-target="1"></p>
    <p data-target="2"></p>
</div>

目标是实现类似的目标

<div>
    <p data-target="collapse1"></p>
    <p data-target="collapse2"></p>
</div>

如何在属性(date-,aria)之前添加/附加一些静态字符串？

解决方法

有几种方法可以实现此目的：

插值

attr.data-target="collapse{{id}}"

属性绑定

[attr.data-target]="'collapse' + id"

属性绑定规范形式

bind-attr.data-target="'collapse' + id"

使用自定义方法

getTarget(id) {
  return `collapse${id}`;
}

HTML

[attr.data-target]="getTarget(id)"

要么

bind-attr.data-target="getTarget(id)"

ng-run的实例

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!