Угловое изменение изображения на основе динамического значения

Question

Вот мой код ниже

Я делаю только тогда, когда еще условие, которое я хочу сделать, если еще, если если условие основано на трех значениях, я хочу изменить изображение

<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

Вы можете сохранить троичный оператор в шаблоне, если хотите, с потоком 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

Надеюсь, это то, что вы ищете.

Answer 2

Вы можете использовать несколько тегов 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 3

попробуйте это решение на основе моего комментария:

Проверьте пример на StackBlitz

Проверка выполняется на компоненте, в вашем getRequestStatus () я использовал ngOnInit с таймаутом для «динамического» изменения

источник автоматически обновляется в зависимости от изменения свойства источника.

вид:

<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

Переместить логику в компонент.

В вашем component.html

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

В вашем component.ts

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