Вложенный цикл данных JSON для * ngFor в угловых 5/4

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

Ваш внутренний цикл должен перебирать кошку родителя, а не categoryList

Изменение

С

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

Answer 2

во внутреннем цикле, вы должны перебрать внутренний массив

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