Angular 4/5中如何使用*ngFor循环嵌套JSON数据？

嘿，我来帮你搞定这个嵌套循环的实现！先提个关键的小问题——你定义的CATEGORIES数组里有个语法错误：Clothing项的subcategory值写成了'jeans}'，多了个多余的闭合大括号，得先修正这个，不然会导致数据解析失败。

第一步：修正数据与基础定义 #

先把你的数据、模型和服务代码调整成正确的格式：

// 先新建category.model.ts定义Category接口（如果还没有的话）
export interface Category {
  id: number;
  categoryName: string;
  subcatName: { subcategory: string }[];
}

// 修正后的分类数据
export const CATEGORIES: Category[] = [ 
  { id: 1, categoryName:'Accessories', subcatName: [ {subcategory: 'belts'} ] }, 
  { id: 2, categoryName:'Clothing', subcatName: [ {subcategory: 'jeans'} ] }, 
]; 

// 服务代码保持不变，逻辑是没问题的
@Injectable() 
export class CategoriesService { 
  constructor() { } 
  getCategories(): Category[]{ return CATEGORIES; } 
} 

第二步：在组件中注入服务获取数据 #

在你要渲染列表的组件里，注入CategoriesService，并在初始化阶段获取分类数据：

import { Component, OnInit } from '@angular/core';
import { CategoriesService } from './categories.service';
import { Category } from './category.model';

@Component({
  selector: 'app-category-list',
  templateUrl: './category-list.component.html'
})
export class CategoryListComponent implements OnInit {
  // 用来存储分类列表的变量
  categoryList: Category[] = [];

  constructor(private categoriesService: CategoriesService) { }

  ngOnInit(): void {
    // 从服务拉取分类数据
    this.categoryList = this.categoriesService.getCategories();
  }
}

第三步：模板中实现嵌套循环 #

在组件的HTML模板里，用两层*ngFor实现嵌套列表，外层遍历主分类，内层遍历对应子分类，同时加个判断避免空数据渲染异常：

<ul>
  <!-- 外层循环：遍历所有主分类 -->
  <li *ngFor="let cat of categoryList">
    <!-- 显示主分类名称 -->
    <strong>{{ cat.categoryName }}</strong>
    <!-- 内层循环：遍历当前主分类的子分类，先判断是否有子分类再渲染 -->
    <ul *ngIf="cat.subcatName && cat.subcatName.length > 0">
      <li *ngFor="let subcat of cat.subcatName">
        {{ subcat.subcategory }}
      </li>
    </ul>
  </li>
</ul>

最后补全模块配置 #

确保你的Angular模块中声明了组件并提供了服务：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CategoryListComponent } from './category-list.component';
import { CategoriesService } from './categories.service';

@NgModule({
  declarations: [CategoryListComponent],
  imports: [BrowserModule],
  providers: [CategoriesService],
  bootstrap: [CategoryListComponent]
})
export class AppModule { }

这样运行起来，页面就会正确渲染出主分类和对应的子分类嵌套列表啦！

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