Как показать видео и изображения в том же виде, используя Typscript

Question

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

body = [{media: "https://firebasestorage.googleapis.com/v0/b/gymtest-ed199.appspot.com/o/uploads%2Fg2VZAx27ABOBG7fpo7LyRiIIe8c2%2F20190527_163701.mp4?alt=media&token=0ce4a8d2-3334-49de-99a7-24724e986f80"},
              {media:"https://firebasestorage.googleapis.com/v0/b/gymtest-ed199.appspot.com/o/uploads%2FgtNphS09UEQKFbzTzPn9CdZyKyM2%2F1558535656752.jpg?alt=media&token=5885af85-d5c9-43e5-a852-b974ce5b49ba"}]

Первый URL-адрес - видео, а второй URL-адрес - изображение

Вот мой HTML: -

<ion-item *ngFor= "let d of body">
  <video height="150px" width="300px" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
   <source [src]="d.media" type="video/mp4" />
  </video>
  <ion-thumbnail>
   <img [src]="d.media"/> 
  </ion-thumbnail>
</ion-item>

Я хочу реализовать * ngIf, чтобы определить, является ли URL-адрес .mp4, загрузить в тег видео и, если URL-адрес .jpg, загрузить в тег img

P.S. Я новичок в ионике ..

Answer 1

измените элементы вашего массива, чтобы иметь свойство типа содержимого:

body = [
    { media: yourVideoUrlHere, type: “video” },
    { media: yourImageUrlHere, type: “image” },
]

Затем в шаблон для видео добавьте структурную директиву:

*ngIf=“d.type==‘video’”

Для изображений:

*ngIf=“d.type==‘image’”