Angular调用API后如何仅提取响应中memes键的值使用

• 先做前置配置：如果还没启用HTTP请求能力，打开根模块文件app.module.ts，顶部导入HttpClientModule，再把它加入@NgModule的imports数组中。
• 定义数据类型（推荐写法，可获得TS类型提示，避免字段写错）：在要使用该接口的组件TS文件顶部，添加如下接口定义：

// 单条表情包模板数据结构
interface Meme {
  id: string;
  name: string;
  url: string;
  width: number;
  height: number;
  box_count: number;
}

// 接口整体返回结构
interface MemeApiRes {
  success: boolean;
  data: {
    memes: Meme[]
  }
}

• 组件类中处理接口响应、提取目标数组：在组件类中声明存储memes数组的属性，调用接口拿到响应后，直接取出data下的memes数组赋值即可，其余返回字段无需处理，参考代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-meme-list',
  templateUrl: './meme-list.component.html'
})
export class MemeListComponent implements OnInit {
  // 存储提取后的memes数组，初始为空
  memeList: Meme[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 发起GET请求，指定返回类型为之前定义的MemeApiRes
    this.http.get<MemeApiRes>('https://api.imgflip.com/get_memes')
      .subscribe({
        next: (res) => {
          if (res.success) {
            // 只取需要的memes数组赋值
            this.memeList = res.data.memes;
          }
        },
        error: (err) => {
          // 这里可以加请求失败的提示逻辑
          console.error('获取表情包列表失败', err);
        }
      })
  }
}

• 模板中渲染数组内容：在组件对应的HTML文件中，用Angular内置的*ngFor指令遍历memeList，即可渲染每一条meme的内容，参考代码：

<div class="meme-card" *ngFor="let meme of memeList">
  <h4>{{ meme.name }}</h4>
  <img [src]="meme.url" [alt]="meme.name" [width]="meme.width/2" [height]="meme.height/2">
  <p>模板ID：{{ meme.id }} | 可填文本框数量：{{ meme.box_count }}</p>
</div>

提示：如果图片尺寸太大，可以直接在属性绑定里做等比缩放，比如上面例子里宽高都除以2，避免图片撑破页面。

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