Question

假设我有以下代码：

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

如何从我的组件src文件中更改此img .ts属性？

Answer 1

在组件中添加imgSrc

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

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

Answer 2

您可以使用$ event传递标记的引用，并从您的打字稿代码中更改它的属性。

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

或者，如果您想在另一个事件中更改图片标记中的内容，您可以像这样做

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

然后只需访问类似这样的打字稿代码

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

Answer 3

打字稿：

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

Angular 2更改图像src属性

3 个答案: