Angular中如何为响应数组内的每个赛事对象返回单个高光视频

看起来你已经接近目标了，问题出在遍历的层级和视频筛选的方式上。你需要先遍历每一场赛事，然后为每场赛事提取第一个符合条件的高光视频，而不是直接遍历所有视频或者只取单个赛事的视频。

这里有两种可行的实现方式：

方法1：在模板中直接筛选（快速实现） #

调整你的模板结构，先遍历response数组中的每一场赛事，然后使用find()方法获取该赛事下第一个标题为"Highlights"的视频：

<!-- 假设你的组件中已将接口返回的response赋值给了matches变量 -->
<div class="panel" *ngFor="let match of matches">
  <!-- 找到当前赛事的第一个高光视频并保存为变量 -->
  <ng-container *ngIf="(match.videos.find(video => video.title === 'Highlights')) as highlightVideo">
    <p [innerHTML]="highlightVideo.embed | safe"></p>
    <p>{{ match.title }}</p>
  </ng-container>
</div>

说明： #

• *ngFor="let match of matches"：遍历每一场赛事
• match.videos.find(...)：从当前赛事的视频数组中找到第一个标题为"Highlights"的视频
• *ngIf="... as highlightVideo"：只有找到高光视频时才渲染内容，同时将找到的视频赋值给highlightVideo变量供后续使用

方法2：在TypeScript中预处理数据（性能更优） #

如果你的赛事数据量较大，或者需要多次使用筛选后的视频，建议在组件代码中先预处理数据，避免模板中重复执行筛选逻辑：

组件代码： #

// 假设你已经获取到了接口返回的response数据
response = [/* 你的接口数据 */];

// 预处理数据，为每个赛事添加第一个高光视频的属性
processedMatches = this.response.map(match => {
  const firstHighlight = match.videos.find(video => video.title === 'Highlights');
  return {
    ...match, // 保留原赛事的所有属性
    highlightVideo: firstHighlight // 新增属性存储第一个高光视频
  };
});

模板代码： #

<div class="panel" *ngFor="let match of processedMatches">
  <ng-container *ngIf="match.highlightVideo">
    <p [innerHTML]="match.highlightVideo.embed | safe"></p>
    <p>{{ match.title }}</p>
  </ng-container>
</div>

说明： #

• 预处理只在数据加载时执行一次，相比模板中每次变更检测都执行find()，性能更稳定
• 模板代码更简洁，可读性更强

为什么你之前的尝试没生效？ #

你写的<div *ngFor="let video of result.videos[0]"></div>存在两个问题：

1. 如果result是整个response数组，那么result.videos[0]是不存在的（数组本身没有videos属性）
2. 如果result是单个赛事对象，videos[0]确实能取到第一个视频，但你没有遍历所有赛事，所以只会显示一场比赛的内容

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