嘿，我明白你的困扰了！当选择ALL选项时，原本应该在两个md-card里分别展示3张图片和2个视频，但现在两个区域都把5条数据全显示出来了——这明显是过滤逻辑没区分开两个区域的数据源对吧？

下面我给你一套具体的解决方案，假设你用的是Angular + Angular Material（毕竟用到了md-card），步骤很清晰：

第一步：确保数据结构带类型标识 #

首先你的每条媒体数据里得有一个type字段，用来区分是图片还是视频，比如：

interface Media {
  id: number;
  type: 'image' | 'video'; // 关键区分字段
  url: string;
  title?: string;
}

第二步：在组件里拆分过滤逻辑 #

不要用同一个过滤后的数据给两个区域，而是为图片和视频区域分别创建计算属性，根据当前选中的选项返回对应的数据：

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

interface Media {
  id: number;
  type: 'image' | 'video';
  url: string;
}

@Component({
  selector: 'app-media-container',
  templateUrl: './media-container.component.html'
})
export class MediaContainerComponent {
  selectedOption: string = 'ALL';
  // 假设这是你从后端或本地拿到的全部5条数据
  allMediaList: Media[] = [
    { id: 1, type: 'image', url: 'img1.png' },
    { id: 2, type: 'image', url: 'img2.png' },
    { id: 3, type: 'image', url: 'img3.png' },
    { id: 4, type: 'video', url: 'vid1.mp4' },
    { id: 5, type: 'video', url: 'vid2.mp4' }
  ];

  // 图片区域专属过滤数据
  get filteredImages(): Media[] {
    switch (this.selectedOption) {
      case 'ALL':
        // ALL时只取前3张图片
        return this.allMediaList.filter(item => item.type === 'image').slice(0, 3);
      case 'Images':
        // 选Images时返回所有图片
        return this.allMediaList.filter(item => item.type === 'image');
      default:
        // 选Videos时图片区域空
        return [];
    }
  }

  // 视频区域专属过滤数据
  get filteredVideos(): Media[] {
    switch (this.selectedOption) {
      case 'ALL':
        // ALL时只取前2个视频
        return this.allMediaList.filter(item => item.type === 'video').slice(0, 2);
      case 'Videos':
        // 选Videos时返回所有视频
        return this.allMediaList.filter(item => item.type === 'video');
      default:
        // 选Images时视频区域空
        return [];
    }
  }
}

第三步：模板里绑定对应数据源 #

把两个计算属性分别绑定到对应的md-card循环上，这样每个区域只会拿到自己该显示的数据：

<!-- 选项选择器 -->
<div class="option-selector">
  <button (click)="selectedOption = 'ALL'" [class.active]="selectedOption === 'ALL'">ALL</button>
  <button (click)="selectedOption = 'Images'" [class.active]="selectedOption === 'Images'">Images</button>
  <button (click)="selectedOption = 'Videos'" [class.active]="selectedOption === 'Videos'">Videos</button>
</div>

<!-- 图片展示区域 -->
<div class="image-section">
  <h3>Images</h3>
  <md-card *ngFor="let media of filteredImages" class="media-card">
    <img md-card-image [src]="media.url" alt="Image media">
    <md-card-title>{{ media.id }} - Image</md-card-title>
  </md-card>
</div>

<!-- 视频展示区域 -->
<div class="video-section">
  <h3>Videos</h3>
  <md-card *ngFor="let media of filteredVideos" class="media-card">
    <video md-card-image [src]="media.url" controls></video>
    <md-card-title>{{ media.id }} - Video</md-card-title>
  </md-card>
</div>

关键逻辑说明 #

• 用计算属性的好处是，当selectedOption变化时，过滤结果会自动更新，不用手动订阅或触发更新。
• 每个区域的过滤逻辑完全独立：ALL选项下，图片区域只筛选图片并取前3条，视频区域只筛选视频并取前2条；选单一类型时，另一个区域直接返回空数组，不会显示内容。

这样调整后，你再选ALL选项时，两个md-card区域就会分别展示对应的3图2视频，不会再重复显示全部5条数据啦！

内容的提问来源于stack exchange，提问作者Bhrungarajni