Angular 根据动态值更改图像

Question

下面是我的代码

我只做 if then else 条件我想做 if else if if 条件基于三个值我想改变图像

<img [src]="status.getRequestStatus() == 'granted' ? 'assets/imgs/trafficlight_green.png':'assets/imgs/trafficlight_red.png' " class="image--background" >

这是针对 if and else 我想添加的条件 if else if if

喜欢if(new){someimage}else if(new1){some image1} if(new2){some image2}

Answer 1

您可以根据以下条件使用多个 img 标签 -

<img *ngIf="new" [src]="assets/imgs/trafficlight_green1.png" class="image--background">
<img *ngIf="new1" [src]="assets/imgs/trafficlight_green2.png" class="image--background">
<img *ngIf="new2" [src]="assets/imgs/trafficlight_green3.png" class="image--background">

或者使用变量将图像源存储在您的 component.ts 中，然后将其绑定到 component.html 中，如下所示 -

<img [src]="imageSource" class="image--background">

Answer 2

将逻辑移至组件。

在你的component.html

<img [src]="someFn()" class="image--background" >

在你的component.ts

someFn() {
    let rtn = '';
    if(...) {
        rtn = ...
    } else if (...) {
       ...
    } else {
       ...
    }
    return rtn;
}

Answer 3

根据我的评论试试这个解决方案：

查看 StackBlitz

上的示例

验证是在组件上进行的，在你的 getRequestStatus() 上我使用了带有超时的 ngOnInit 来更改 "dynamically"

源会根据源属性的变化自动更新。

查看：

<img [(src)]="sourceImage" width="200" />

组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  sourceImage: string;

  ngOnInit() {
    this.sourceImage = 'https://angular.io/assets/images/logos/angular/angular.svg';

    setTimeout(()=> {
        this.sourceImage = 'https://dwglogo.com/wp-content/uploads/2017/03/AngularJS_logo_004.svg';
    }, 2000)
  }
}

Answer 4

如果你想使用 if else 流程，你可以在模板中保留三元语句，因为三元语句可以链接起来。它可能看起来像这样。

<img [src]="'new' ? 'green.png': new1 ? 'red.png' : 'amber.png'" class="image-background">

这看起来像

if (new)
{ 'green.png' }

else if (new1)
{ 'red.png' }

else 
{ 'amber.png' } // being new2

希望这就是您要找的。

Angular 根据动态值更改图像

Angular change image based on dynamical value

ionic-framework

ionic3

angular