góc 2 sự thay đổi hình ảnh src thuộc tính

Question

Giả sử tôi có đoạn mã sau:

<img [src]="JwtService.characterImage(enemy)" 
     class="{{enemy.status}}" 
    (click)="sidenav.toggle();" style="cursor:pointer"> 

Làm thế nào tôi có thể thay đổi img src asttribute này từ các thành phần của tôi .ts tập tin?

Answer 1

Thêm một imgSrc trong thành phần của bạn

class Component { 
constructor(jwtService: JwtService) { 
    this.imgSrc = JwtService.characterImage(enemy); 
} 
} 

<img [src]="imgSrc" 
     class="{{enemy.status}}" 
    (click)="sidenav.toggle();" style="cursor:pointer"> 

Answer 2

Bạn có thể vượt qua một tham chiếu của thẻ bằng $ sự kiện và thay đổi nó là thuộc tính từ mã nguyên cảo của bạn.

<img (click)="functionInTypeScript($event.target)"> 

Hoặc nếu bạn muốn thay đổi điều gì đó trong thẻ hình ảnh về sự kiện khác, bạn có thể làm điều đó như thế này

<img #image> 
<button (click)=functionInTypeScript(image)> 

và sau đó chỉ cần truy cập vào mã nguyên cảo như thế này

functioninTypeScript(image:any) { 
    image.src='path to new image'; 
} 

Answer 3

nguyên cảo :

getImage(image: any, time: string) { 
    const t1 = '06:00'; 
    const t2 = '18:00'; 
    if (time >= t1 && time < t2) { 
     return ('/images/morning.png'); 
    } else { 
     return ('/images/evening.png'); 
    } 
    } 

HTML:

<img [src]="getImage(this,bettrainList.departureTime)" width="25">