Блог

Главная - Вопросы по программированию - Изображение изменения угла на основе динамического значения

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

#angular #ionic-framework #ionic3

#угловой #ionic-framework #ionic3

Вопрос:

Вот мой приведенный ниже код

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

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

Комментарии:

1. Я думаю, что если вы используете [(src)]="sourceProperty" изменения, основанные на этом, и я бы определенно перенес эту логику в компонент из представления и в status.getRequestStatus(), вы можете установить свойство на основе результата..

Ответ №1:

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

В вашем component.html 

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

В вашем component.ts 

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

Ответ №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">

Ответ №3:

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

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

Ответ №4:

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

Проверьте пример на 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)
  }
}
Метки: