Question

我想使用一个锚来为每个实例多次使用angular-directive调用一个模态。这是锚：

<li>
   <a role="button" 
      data-toggle="modal" 
      data-target="#editModal{{tweet.id}}"
    >Edit</a>
</li>

但是当我使用{{ }}时，编译的html代码只显示

target="#editModal24"

因此呼叫无效。

当我在浏览器中手动更改为数据目标属性时，一切正常。

任何想法如何预防？

祝你好运

Answer 1

Angular规范化属性名称

private _normalizeAttributeName(attrName: string): string {
  return /^data-/i.test(attrName) ? attrName.substring(5) : attrName;
}

注意：即使<div data-*ngIf="3">Hello</div>也可以顺利运行。

当您使用插值内部属性时，它将被视为属性绑定

因此将target属性设置为a元素。

是反映目标HTML属性的DOMString，表示在哪里显示链接的资源。

这就是为什么在将target属性设置为锚元素后可以看到target属性的原因。

如果您想保留data-target属性，请使用属性绑定，如：

选项1

attr.data-target="#editModal{{tweet.id}}"

选项2

[attr.data-target]="'#editModal' + tweet.id"