Angular添加自定义属性并绑定一个变量

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/moqiuqin/article/details/98730433

Angular中如果使用自定义属性时使用的是H5添加的方式，那么有一个问题是，自定义属性的值是固定不变的，也就是不能绑定变量，比如下面的方式

<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)"
data-index="i"></a>

结果是：本来需要的结果是

data-index

的值是

i

的值，但实际上这里的

i

没有被当成一个变量，而是一个值。

那么如果我们需要绑定一个变量的话，需要使用

attr

，关于

attr

我在官网上找不到相关的说明，如果有人知道的话告诉一下，不胜感激！

正确的使用方式是：

[attr.data-index]="i"

，片段如下

<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="locationImage(i)"
[attr.data-index]="i"></a>

结果：

获取的时候通过模板引用变量获取就可以了，但是如果像我这里通过循环产生的话，获取不是很方便，可以通过在父节点使用模板引用变量，通过父获取子