Question

我是棱角分明的新人我已经创建了一个服务来循环我的列表的嵌套json数据。

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;
  }
}

我正在尝试将此数据循环到我的列表中

<ul>
    <li *ngFor="let cat of categoryList">
        <a href="#">{{cat.categoryName}}</a>
            <ul>
            <li *ngFor="let subcat of categoryList">
                <a href="#"> asdad {{subcat.subcategory}}</a>
            </li>
        </ul>
    </li>
</ul>

为此，我在组件.ts文件中添加了代码

 export class CategoriesComponent implements OnInit {

 categoryList: Category[];

 constructor(private categoryservice: CategoriesService) { }

 ngOnInit() {
   this.categoryList = this.categoryservice.getCategories();
 }

}

请帮助，我想创建一个类别的导航栏列表，当悬停时它显示相关的子类别。如果您需要更多信息，请与我们联系。

Answer 1

在内循环中，你应该遍历内部数组

<ul>
    <li *ngFor="let cat of categoryList">
        <a href="#">{{cat.categoryName}}</a>
            <ul>
            <li *ngFor="let subcat of cat.subcatName">
                <a href="#"> asdad {{subcat.subcategory}}</a>
            </li>
        </ul>
    </li>
</ul>

Answer 2

您的内部循环应该迭代父类而不是categoryList

的cat

更改

发件人

<li *ngFor="let subcat of categoryList"> <a href="#"> asdad {{subcat.subcategory}}</a> </li>

要

<li *ngFor="let subcat of cat.subcatName"> <a href="#"> asdad {{subcat.subcategory}}</a> </li>

用于* ngFor的嵌套JSON数据循环，角度为5/4

2 个答案: