1
votes

Image de changement angulaire basée sur la valeur dynamique

Voici mon code ci-dessous

Je ne fais que si alors autre condition que je veux faire sinon si si condition basée sur trois valeurs je veux changer l'image

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

ceci est pour if and else condition je veux ajouter if else if if

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

angular ionic-framework ionic3

1 commentaires

Je pense que si vous utilisez les modifications [(src)] = "sourceProperty" basées sur cela, et je déplacerais deffenitly cette logique vers le composant de la vue, et sur le status.getRequestStatus () vous peut définir la propriété en fonction du résultat.

4 Réponses :

1
votes

Vous pouvez utiliser plusieurs balises img à la condition ci-dessous -

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

Ou utiliser une variable pour stocker la source de l'image dans votre component.ts code> puis liez-le dans component.html comme ci-dessous -

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

0 commentaires

1
votes

Déplacez la logique vers le composant.

Dans votre component.html

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

Dans votre component.ts

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

0 commentaires

0
votes

essayez cette solution en fonction de mon commentaire:

Consultez l'exemple sur StackBlitz

La validation se fait sur le composant, sur votre getRequestStatus () J'ai utilisé ngOnInit avec un timeout pour changer "dynamiquement"

la source est automatiquement mise à jour en fonction de la source changement de propriété.

view:

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

composant:

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

0 commentaires

1
votes

Vous pouvez conserver l'instruction ternaire dans le modèle si vous le souhaitez avec le flux if else, car un ternaire peut être chaîné. Cela pourrait ressembler à ceci.

if (new)
{ 'green.png' }

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

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

Cela ressemblerait à

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

J'espère que c'est ce que vous recherchez.

0 commentaires