Angular document.getElementById 不能动态使用插值

Question

I have a list of dynamic images that I want to display opacity only when the user hovers over the particular image. My issue is I assign each image an id dynamically but cannot get the property of the element dynamically.

I get and error of Got interpolation ({{}}) where expression was expected

<span *ngFor="let image of imagess">   
  <img  attr.id="Image{{image.id}}"
    [src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)"       
    onmouseover="style.opacity=.16;"
    onmouseout="style.opacity=1;"
    />    
  <span onmouseover="document.getElementById('Image'{{image.id}}).style.opacity=.16;"> <----Right here is what I need 

  //Icons and other things here      
  </span>    
</span>

Answer 1

I would rewrite it to Angular way:

<span *ngFor="let image of images">   
  <img
    ...
    #img   
    (mouseover)="img.style.opacity= '.16'"
    (mouseout)="img.style.opacity= '1'"
    />    
  <span 
    (mouseover)="img.style.opacity= '.16'"
    (mouseout)="img.style.opacity= '1'"
  >Hover over me</span>    
</span>

Ng-run Example