Angular模板中如何展示对象内数组的name字段

问题分析 #

你的obj对象中每个字母键（如A、B）对应一个商家数组，而非单个商家对象。直接使用{{obj[key].name}}会报错，因为数组本身没有name属性，需要遍历数组内的每个商家元素才能获取name字段。同时，数据通过异步请求获取，需处理初始加载时的空值问题。

解决方案 #

1. 嵌套*ngFor遍历数组元素 #

在模板中通过两层*ngFor，先遍历字母分组，再遍历每组内的商家数组，直接访问单个商家的name字段：

<section class="dc-card stores">
  <!-- 遍历所有字母分组 -->
  <div *ngFor="let key of keys">
    <!-- 显示分组字母 -->
    <h2>{{key}}</h2>
    <!-- 遍历当前分组下的商家数组 -->
    <div class="merchant-item" *ngFor="let merchant of obj[key]">
      <!-- 展示商家名称 -->
      <span>{{merchant.name}}</span>
      <!-- 可选：展示商家缩略图 -->
      <img [src]="merchant.image?.thumbnail" [alt]="merchant.name">
    </div>
  </div>
</section>

2. 处理异步数据的空值安全 #

由于数据是异步加载的，初始状态下obj[key]为空数组，可通过以下方式避免报错：

• 使用安全导航操作符?.：访问嵌套属性时防止空值报错（如merchant.image?.thumbnail）
• 添加*ngIf过滤空分组：只显示有商家数据的分组

<section class="dc-card stores">
  <div *ngFor="let key of keys" *ngIf="obj[key]?.length > 0">
    <h2>{{key}}</h2>
    <div class="merchant-item" *ngFor="let merchant of obj[key]">
      {{merchant.name}}
      <img [src]="merchant.image?.thumbnail" [alt]="merchant.name">
    </div>
  </div>
</section>

3. 优化组件异步请求（可选） #

原代码中循环发起请求并逐个订阅，可改用forkJoin合并所有请求，减少变更检测次数，提升性能：

import { forkJoin } from 'rxjs';

// ...组件其他代码

ngOnInit(): void {
  this.keys = Object.keys(this.obj);
  
  // 生成所有字母对应的请求Observable数组
  const merchantRequests = this.keys.map(key => this.api.getMerchantsWithAlbhabet(key));
  
  // 合并请求，等待所有请求完成后统一处理
  forkJoin(merchantRequests).subscribe((responses) => {
    responses.forEach((response, index) => {
      const currentKey = this.keys[index];
      this.obj[currentKey] = response.results;
      this.merchant.push(response.results);
    });
  });
  
  this.getPopularMerchants();
}

关键说明 #

• obj[key]是数组类型，必须遍历数组元素才能获取单个商家的name属性
• 异步请求完成前，obj[key]为空数组，需通过安全导航或*ngIf避免模板报错
• 使用forkJoin可优化多请求场景，避免多次订阅带来的性能损耗

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