Angular2: I am trying to pass values from an *ngFor
loop as a parameter to function call on the (click)
attribute (since calling functions on onclick is not allowed for security reasons) event on my anchor tag.
Template Code:
<div *ngFor='let artist of artists'>
<a (click)="alert({{artist.artist_id}})" href="#">{{artist.artist_name}}</a>
</div>
Compile Time error:
Got interpolation ({{}}) where expression was expected in [alert({{artist.artist_id}})]
Problem:
How do I pass the value of artist to the function call on (click)
?
Any/All help appreciated! :)
In your case, you don't need the double-curly braces since you are passing the variable to a function in a event binding click attribute, therefore you can remove those braces and it will work as expected:
<div *ngFor='let artist of artists'>
<a (click)="alert(artist.artist_id)" href="#">{{artist.artist_name}}</a>
</div>
According to the relevant documentation , you only need to use interpolation when inserting a value between HTML element tags and within attribute assignments (not to be confused with event/property binding).
For instance, you would need to use interpolation for this direct src
attribute assignment, otherwise the value would be interpreted as a string:
<img src="{{pathUrl}}" />
However, if you were to use property binding (ie, [src]
rather than src
), it would be treated as a variable and the interpolation wouldn't be required:
<img [src]="pathUrl" />
The same would apply to event binding like in your case.
In other words, as stated by Günter in the comment above , you never need to use event/property binding, (ie, ()
/ []
/ [()]
), together with variable interpolation, (ie, double-curly braces, {{}}
).
只需删除插值并调用alert(artist.artist_id)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.