Angular Add a custom property and bind a variable


Angular If you use the H5 How to add , So there's a problem , The value of a custom property is fixed , That is, you cannot bind variables , For example, the following way
<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="
locationImage(i)" data-index="i"></a>
The result is ： What was expected was that data-index The value of is i Value of , But actually it's not here i It's not treated as a variable , It's a value .

So if we need to bind a variable , Need to use attr, about attr It's explained on the official website , See template syntax

What's the right way to use it ：[attr.data-index]="i", The fragment is as follows
<a href="javascript:void(0)" *ngFor="let item of images, let i=index" (click)="
locationImage(i)" [attr.data-index]="i"></a>
result ：

When getting it, you can get it through the template reference variable , But if it's generated by circulation like I do here , Access is not very convenient , You can reference variables by using a template on the parent node , Get a son from a father

Technology
©2020-2025 ioDraw All rights reserved, Privacy Policy