Как я могу использовать директиву * ngIf для изменения изображения?

Question

Я разрабатываю приложение с использованием технологий, показанных ниже.Как я могу использовать директиву * ngIf, чтобы изменить изображение на другое?Я буду более точным в объяснении своих намерений;У меня есть два изображения (мужской символ ♂ и женский символ ♀), когда у меня «пол == М», я должен отображать мужской символ, вместо этого, когда у меня «пол == F», я должен отображать женский символ.Спасибо всем!

Технологии, которыми я сейчас пользуюсь:

• Ионные 4.10.2
• Угловые 6
• 8.1.2 (cordova-lib@8.1.1)
• TypeScript
• Код Visual Studio

Answer 1

вы можете использовать, как показано ниже

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

используя выше, нет необходимости использовать директиву ngIf

Answer 2

Я решил,

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

Answer 3

Вместо использования изображений вы можете использовать шрифт Awesome Icons

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