HTML中的自定义属性绑定

Question

使用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 ）之前添加/附加一些静态string？

Answer 1

有几种方法可以实现这一目标：

<强>插值

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

属性绑定

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

属性绑定规范形式

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

使用自定义方法

<强> TS

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

<强> HTML

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

或

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

ng-run

上的实例

Answer 2

它的工作方式与使用双向绑定变量附加的方式相同，在本例中为

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