如何使用 *ngIf 指令更改图像？答案

【问题标题】：How can I use *ngIf directive to change an image?如何使用 *ngIf 指令更改图像？
【发布时间】：2019-03-07 11:16:22
【问题描述】：

我正在使用如下所示的技术开发一个应用程序。我如何使用 *ngIf 指令将图像更改为另一个图像？我会更准确地解释我的意图；我有两个图像（男性符号♂和女性符号♀），当我有“性别 == M”时，我必须显示男性符号，而不是当我有“性别 == F”时，我必须显示女性符号。谢谢大家！

我目前使用的技术：

离子 4.10.2
角度 6
8.1.2 (cordova-lib@8.1.1)
打字稿
Visual Studio 代码

【问题讨论】：

你的代码是什么样子的？

标签： angular angular-ng-if

【解决方案1】：

你可以像下面这样使用

<img src="gender == 'M'? 'your image path for male': 'your image path for Female'"/>

使用上面不需要使用ngIf指令

【讨论】：

不应该是<img [src]="gender == 'M' ? 'path1' : 'path2'"/>或者<img src="{{gender == 'M' ? 'path1' : 'path2'}}" />的angular接受插值吗？

【解决方案2】：

我解决了，

<img *ngIf="response.gender == 'F'" src="female.png" slot="start" />
<img *ngIf="response.gender == 'M'" src="male.png" slot="start" />

【讨论】：

【解决方案3】：

您可以使用字体很棒的图标，而不是使用图像

<div *ngIf="gender == 'F'; else elseBlock">
  <i class="fa fa-venus" aria-hidden="true">
  </i>
</div>
<ng-template #elseBlock>
  <i class="fa fa-mars" aria-hidden="true">
  </i>
</ng-template>

【讨论】：