角度：数据绑定到数据属性不起作用

Question

我有以下代码，在其中添加数据属性data-description

<span *ngFor="let item of images">

<img
        src="{{ item.url }}"
        alt="{{ item.name }}"
        data-description="{{ item.description }}"
      />
</span>

生成的html代码为

<span>    
    <img
            src="url/here"
            alt="name/here"
          />
    </span>

如您所见，data-description根本没有显示。如何添加？

Answer 1

您需要绑定到attr属性，因为data-规范特别取决于HTML属性而不是DOM元素的属性。

您可以的话

<span *ngFor="let item of images">
    <img
        [src]="item.url"
        [alt.alt]="item.name"
        [attr.data-description]="item.description"
      />
</span>

下面是示例输出See this Demo

Answer 2

使用绑定而不是字符串插值来绑定到data-description，使用attr前缀。

[attr.data-description]="item.description"

我还将src插值也更改为prop绑定：

<span *ngFor="let item of images">
    <img
        [src]="item.url"
        [alt]="item.name"
        [attr.data-description]="item.description"
      />
</span>

StackBlitz