如何用单个标签显示图片/视频？下拉切换及ngIf实现方法求助

当然可以用*ngIf来实现这个媒体切换功能！这在Angular里是非常典型的条件渲染场景，我会给你两种实用的实现方案：一种是直接用*ngIf分别控制图片和视频的显示，另一种是用单个容器标签来规整动态切换的结构。

方案一：使用*ngIf实现基础切换 #

首先需要在组件类里定义一个变量跟踪当前选中的媒体类型，通过双向绑定关联下拉菜单，最后用*ngIf根据变量值决定显示图片还是视频。

组件TS代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-media-switcher',
  templateUrl: './media-switcher.component.html',
  styleUrls: ['./media-switcher.component.css']
})
export class MediaSwitcherComponent {
  // 初始默认选中图片类型
  selectedMediaType: string = 'img';
}

组件HTML代码

<!-- 下拉菜单，双向绑定选中的媒体类型 -->
<select [(ngModel)]="selectedMediaType">
  <option value="img">图片</option>
  <option value="videos">视频</option>
</select>

<!-- 选中图片时显示 -->
<img 
  *ngIf="selectedMediaType === 'img'"
  class="cat-img" 
  src="your-image-path.jpg" 
  style="width: 100px;margin: 10px 0px;"
  alt="猫咪图片"
>

<!-- 选中视频时显示 -->
<video 
  *ngIf="selectedMediaType === 'videos'"
  width="320" 
  height="240" 
  controls
>
  <source src="your-video-path.mp4" type="video/mp4">
  你的浏览器不支持视频播放
</video>

注意：要使用[(ngModel)]，需要在对应模块（比如app.module.ts）中导入FormsModule，否则双向绑定会失效。

方案二：用单个容器标签动态切换（更简洁的结构） #

如果你希望用“单个逻辑标签”包裹媒体内容（避免DOM中出现多个同级媒体标签），可以用ngSwitch配合ng-container——ng-container不会被渲染成真实DOM元素，非常适合做纯逻辑容器：

<select [(ngModel)]="selectedMediaType">
  <option value="img">图片</option>
  <option value="videos">视频</option>
</select>

<ng-container [ngSwitch]="selectedMediaType">
  <img 
    *ngSwitchCase="'img'"
    class="cat-img" 
    src="your-image-path.jpg" 
    style="width: 100px;margin: 10px 0px;"
    alt="猫咪图片"
  >
  <video 
    *ngSwitchCase="'videos'"
    width="320" 
    height="240" 
    controls
  >
    <source src="your-video-path.mp4" type="video/mp4">
    你的浏览器不支持视频播放
  </video>
</ng-container>

这种方式和*ngIf的逻辑本质一致，但结构更紧凑，后续如果要扩展更多媒体类型（比如音频），ngSwitch的可读性会比多个*ngIf更好。

额外小技巧 #

如果你的媒体路径是动态获取的（比如从后端接口拿到），只需要把src改成绑定变量即可：

<img *ngIf="selectedMediaType === 'img'" [src]="currentMediaUrl" ...>
<video *ngIf="selectedMediaType === 'videos'" ...>
  <source [src]="currentMediaUrl" type="video/mp4">
</video>

然后在组件类里监听selectedMediaType的变化，同步更新currentMediaUrl的值就可以了。

内容的提问来源于stack exchange，提问作者Schüler