1
votes

Comment représenter l'image au lieu de la valeur de liaison de données? Utilisation angulaire

Je suis novice en angular et peu confus avec les concepts, est-ce que quelqu'un peut prendre une minute et me dire comment puis-je afficher l'image green.png si dev.status est 1 et red.png si d ev.status est 2 ? Voici ce que j'ai essayé, mais il semble que ce ne soit pas la bonne méthode:

<tr *ngFor="let dev of devices">                              
<td>{{dev.slc_id}}</td>
<td>{{dev.location}}</td>

<td>{{dev.status =="1 "? '.assets/img/green.png' : '.assets/img/red.png' }}</td>  
</tr>

angular

0 commentaires

3 Réponses :

0
votes

Voici ce dont vous avez besoin

<tr *ngFor="let dev of devices">
  <td>{{dev.slc_id}}</td>
  <td>{{dev.location}}</td>

  <td *ngIf="dev.status =='1' ">
    <img src=".assets/img/green.png" alt="green">
  </td>

  <td *ngIf="dev.status =='2' ">
    <img src=".assets/img/red.png" alt="red">
  </td>
</tr>

0 commentaires

0
votes

vous pouvez utiliser ce

<img src='.assets/img/green.png' *ngIf='dev.status == "1"'>
<img src='.assets/img/red.png' *ngIf='dev.status !="1"'>

0 commentaires

0
votes

Vous pouvez utiliser ngIf pour cette condition. ci-dessous est le code que vous pouvez utiliser pour vérifier l'état.

<tr *ngFor="let dev of devices">                              
<td>{{dev.slc_id}}</td>
<td>{{dev.location}}</td>

<td>
   <img *ngIf="dev.status == '1'" src=".assets/img/green.png"
   <img *ngIf="dev.status != '1'" src=".assets/img/red.png"
</td>  
</tr>

0 commentaires