How to reference a loop variable as a parameter of a method call of an attribute?-CodePudding

In the html of my component there is like this :

<div *ngFor="let image of images; let i=index;" >
    <i  (click)="removeImage(i, {{image.docname}})"></i>
</div>

At runtime I get console error Got interpolation ({{}}) where expression was expected

So how to make the call correctly ?

CodePudding user response：

You can't use the syntax {{}} inside the attributes, so simply change the code to:

<div *ngFor="let image of images; let i=index;" >
    <i  (click)="removeImage(i, image.docname)"></i>
</div>

The properties with square brackets and round brackets are already interpolated, instead if you add code outside that properties you should explicitly use the brackets. Here are some examples:

<!-- it shows the value of myVariable inside the div -->
<div [innerHtml]="myVariable"></div>

<!-- it shows the value of myVariable inside the div -->  
<div>{{myVariable}}</div>  

<!-- it execute the method myFunction with myVariable as parameter -->
<div (click)="myFunction(myVariable)">Click here</div>

<!-- it shows the string "myVariable" inside the div -->
<div>myVariable</div>

<!-- it shows the string "myVariable" inside the div -->
<div [innerHtml]="'myVariable'"></div>

<!-- it shows the string "myVariable" inside the div -->
<div innerHtml="myVariable"></div>