Angular遍历JSON数组时如何仅提取videos数组的首个完整集锦对象

解决方案 #

你可以通过以下两种方式实现需求： #

方法1：直接取数组首元素（适用场景：确认完整集锦永远在videos数组第一位）

不需要循环整个videos数组，直接取索引为0的元素即可，修改后的模板代码如下：

<div *ngFor="let results of data.response.slice(0,6)">
    <div class="panel panel-default">
        <!-- 直接取第一个视频（完整集锦） -->
        <div>
            <p [innerHTML]="results.videos[0].embed | safe">  </p>
            <p>{{results.videos[0].title}}</p> 
        </div>
    </div>
</div>

方法2：按标题筛选（适用场景：videos数组顺序不固定，避免接口调整导致取错内容）

可以在循环videos的时候添加判断条件，只渲染标题为Highlights的内容：

<div *ngFor="let results of data.response.slice(0,6)">
    <div class="panel panel-default">
        <div *ngFor="let result of results.videos">
            <!-- 只渲染完整集锦 -->
            <ng-container *ngIf="result.title === 'Highlights'">
                <p [innerHTML]="result.embed | safe">  </p>
                <p>{{result.title}}</p> 
            </ng-container>
        </div>
    </div>
</div>

如果追求更好的性能，更推荐你在component.ts中提前处理接口返回的数据，过滤掉每个赛事下非集锦的视频内容，再传给模板渲染，避免模板层做多余的判断和循环。

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