Ionic Angular读取JSON后NgFor遍历报错不支持对象类型问题咨询

错误根源 #

• 报错1（NgFor不可迭代）：服务返回的是包含categories数组的外层对象{categories: Array(9)}，你直接将该对象赋值给页面用于遍历的变量，*ngFor仅支持遍历数组类型，无法直接遍历外层对象。
• 报错2（push undefined）：你声明了cdata:any[]但没有初始化空数组，未赋值的数组变量默认是undefined，调用push方法自然报错。
• 额外问题：HTML模板中绑定的字段和JSON实际字段不匹配，JSON中只有c_id/c_name/c_description，没有id/name/title字段，后续即使遍历成功也会显示空值。

完整修复代码 #

1. 可注入服务类修改 #

import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CategoryData {
  // 初始化空数组存储处理后的分类数据
  private categories: any[] = [];

  constructor(public http: HttpClient) {}

  loadCategories(): Observable<any[]> {
    if (this.categories.length > 0) {
      // 已有缓存直接返回数组
      return of(this.categories);
    } else {
      // 注意文件名要和实际JSON文件名一致，你原文件是c_data.json不要写错
      return this.http.get('assets/data/c_data.json')
        .pipe(map(this.processData, this));
    }
  }

  processData(data: any): any[] {
    // 直接提取外层对象里的categories数组
    this.categories = data.categories || [];
    this.categories.forEach(category => {
      category ? console.log('Fetched', category.c_name) : console.log('Incapable to fetch category data');
    });
    // 返回数组而不是外层对象
    return this.categories;
  }

  getCategories(): Observable<any[]> {
    return this.loadCategories();
  }
}

2. 页面TS代码修改 #

import { Component } from '@angular/core';
import { CategoryData } from '替换为你的服务类实际路径';

@Component({
  selector: 'app-category-list',
  templateUrl: './category-list.page.html',
  styleUrls: ['./category-list.page.scss'],
})
export class CategoryListPage {
  // 初始化为空数组避免渲染时报错
  categories: any[] = [];

  constructor(public catData: CategoryData) {}

  ionViewDidEnter() {
    this.catData.getCategories().subscribe((categories: any[]) => {
      // 此时返回的已经是处理好的数组，直接赋值即可
      this.categories = categories;
    });
  }
}

3. HTML模板字段修正 #

<ion-grid fixed>
  <ion-row>
    <ion-col size="12" size-md="6" *ngFor="let cat of categories">
      <ion-card class="category-card">
        <ion-card-header>
          <ion-item detail="false" lines="none" class="category-item" routerLink="/app/tabs/categories/category-details/{{cat.c_id}}">
            <ion-avatar slot="start">
              <!-- 无profilePic时可以配置默认图避免显示裂图 -->
              <img [src]="cat.profilePic || 'assets/default-category-icon.png'" [alt]="cat.c_name + ' profile picture'">
            </ion-avatar>
            <ion-label>
              <!-- 替换为JSON中实际存在的字段 -->
              <h2>{{cat.c_name}}</h2>
              <p>{{cat.c_description}}</p>
            </ion-label>
          </ion-item>
        </ion-card-header>
        <ion-card-content>
          <ion-list lines="none">
            <ion-item detail="false" routerLink="/app/tabs/categories/category-details/{{cat.c_id}}">
              <ion-label>
                <h3>About {{cat.c_name}}</h3>
              </ion-label>
            </ion-item>
          </ion-list>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

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