使用“ng-if”

选择下拉菜单

<select ng-model='option'> <option value='image'>Image</option> <option value='video'>Video</option> </select>

将您的图像/视频代码更改为

<img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;" ng-if="option=='image'"> 
 <video width="320" height="240" controls> <source src="videopath" type="video/mp4" ng-if="option=='video'"></video>

如果您希望此图像/视频都使用一行，则最好为此编写一个组件。

有了“bootstrap”，你可以做一个“可折叠” accordion 检查此演示：https://jsfiddle.net/qq37qbdh/

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#videos">
        Videos</a>
      </h4>
    </div>
    <div id="videos" class="panel-collapse collapse in">
      <div class="panel-body">
        videos section
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#images">
        Images</a>
      </h4>
    </div>
    <div id="images" class="panel-collapse collapse">
      <div class="panel-body">
        Images Section
      </div>
    </div>
  </div>
</div>

下面是一个对我很有效的解决方案。通常，视频/图片来自一个URL，并被分配到src，在我的例子中，它们不是本地的和静态的，而是来自IPFS，但可以来自任何URL。我用JSON创建了一个简单的obj数组：

export interface media{'src': string, 'type': string}
var myMedia: media[] = [];

然后当我填充数组中每个obj的“src”部分时，我在调用promise“mediaType”的服务函数中做了一点MIME检查...

for(var x=0; x < myMedia.length; x++){
    if(myMedia[x].src!=null){
        this.mediaType(x, myMedia[x].src).then(function(data){
            myMedia[data.index].type = data.ret;
        }.bind(this)).catch( err => {
            console.log('error: ' + JSON.stringify(err));
        }); 
    } else {
        myMedia[x].mediaType = null;
        //handle condition where src was null for some reason;
    }
}

......这是mediaType的承诺......

mediaType(index: number, URL: string){ 
    return new Promise((resolve, reject) => {
        fetch(URL, {method:'HEAD'})
        .then(response => {
            if (!response.ok) {
                throw new Error(response.statusText)
            }
            var ret = response.headers.get('content-type');
            resolve({'ret': ret, 'index': index});
        },
        (err) => {
            reject({error : err});
          }
        )
    })
}

index #允许for循环异步向前旋转，并且仍然将值应用于正确的数组元素。现在在HTML *ngFor中，myMedia的元素'media'看起来像这样...

<img
    class="w-full object-cover"
    [src]="media.src" *ngIf="token.mediaType!=null && token.mediaType.split('/', 2)[0]=='image'">

<video
    class="w-full object-cover" controls
    [src]="media.src" *ngIf="token.mediaType!=null && token.mediaType.split('/', 2)[0]=='video'">
</video>

拆分将允许任何图像或视频MIME工作（例如：图像/PNG对图像/JPG，或者视频/MP4对视频/MOV）。