Ionic中如何获取嵌套JSON数组addonItems的name值？

嘿，作为Ionic新手遇到这个问题太正常了，我来帮你捋清楚！你现在能显示外层addonCategories的名称，但内层addonItems的内容出不来，核心问题出在模板的嵌套结构上，另外我们还可以优化空值处理和变量命名，让代码更健壮。

问题分析 #

你把ion-item-group直接放在了ion-list-header内部，这不符合Ionic列表组件的嵌套规范——ion-list-header是用来做分组标题的，它的内部不应该承载选项组这类内容。正确的逻辑应该是：每个分类的标题（ion-list-header）和对应的选项组（ion-item-group）平级放在ion-list中。

另外，虽然你的测试数据里addonItems是完整的，但实际开发中可能会遇到数据未加载完成的情况，建议用**安全导航操作符?.**避免空值报错。

修正后的代码 #

<ion-list class="setting-content">
  <!-- 用ng-container包裹每个分类的标题和选项组，不生成额外DOM -->
  <ng-container *ngFor="let category of (addonDetail | async)?.addonCategories">
    <!-- 分类标题 -->
    <ion-list-header no-lines>
      {{ category.name }}
    </ion-list-header>
    <!-- 分类对应的选项组 -->
    <ion-item-group class="fst-group">
      <ion-item *ngFor="let addonItem of category?.addonItems" no-lines>
        <ion-label>{{ addonItem.name }}</ion-label>
        <ion-checkbox (click)="clickAddon(addonItem)" item-right></ion-checkbox>
      </ion-item>
    </ion-item-group>
  </ng-container>
</ion-list>

关键优化点 #

• 调整嵌套结构：用ng-container包裹每个分类的标题和选项组，确保ion-list-header和ion-item-group是平级关系，符合Ionic组件的使用规范。
• 语义化变量名：把item改成category，item1改成addonItem，让代码逻辑更清晰易懂。
• 空值安全处理：在category?.addonItems中使用?.，确保当数据还未加载完成时，不会抛出空指针错误。

额外验证步骤 #

你可以在组件类里先确认数据是否正确获取，比如在ngOnInit里打印返回结果：

ngOnInit() {
  this.addonDetail.subscribe(data => {
    console.log('服务器返回的数据:', data);
  });
}

这样能快速确认addonCategories和addonItems是否都被正确解析了。

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