Angular 2 изменить атрибут src изображения

Предполагая, что у меня есть следующий код:

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

Как я могу изменить этот атрибут img src из моих компонентов .ts?

Ответы

Ответ 1

Добавьте imgSrc в свой компонент

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

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

Ответ 2

Вы можете передать ссылку своего тега, используя $event, и изменить его атрибут из вашего кода typescript.

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

Или если вы хотите что-то изменить в теге изображения на другом событии, вы можете сделать это, как это.

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

а затем просто получить доступ к typescript коду, подобному этому

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

Ответ 3

Typescript:

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">