Angular вывести данные во вложенном цикле из json файла

Рейтинг: 0Ответов: 1Опубликовано: 25.01.2023

В компоненте я хочу построить меню из данных json файла. Я получаю содержание файла и пытаюсь вывести его в шаблоне с помощью вложенных циклов ngFor, но дочерние данные никогда не выводятся, хотя в консоли я вижу что данные есть. Подскажите, как исправить.

Содержание файла public.menu

[
{
    "title": "Карта",
    "icon": "map",
    "route": "/home"
},
{
    "title": "Мероприятия",
    "icon": "accessibility",
    "route": "/events"
},
{
    "title": "О проекте",
    "icon": "information-circle",
    "route": "/about"
},
{
    "title": "Контакты",
    "icon": "call",
    "route": "/contacts",
    "children":[
        {
            "title": "Обратная связь",
            "icon": "phone",
            "route": "/contacts/feedback"
        },
        {
            "title": "Чат с тех. поддержкой",
            "icon": "chatbox-ellipses",
            "route": "/contacts/support"
        }
    ]
}

]

компонент.ts

import { Component, OnInit } from '@angular/core';
import menuPublicData from '../../../assets/json/menu-public.json'

interface menuPublic {
  title: String;
  icon: String;
  route: String;
  children?: any;
}

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],

export class HeaderComponent implements OnInit {
   menuPublic: menuPublic[] = menuPublicData

  constructor() { }

  ngOnInit() {
    console.log(this.menuPublic)
  }

}

компонент.html

     <div  
        *ngFor="let item of menuPublic" 
         [routerLink]="[ item.route ]"
         [routerLinkActive]="['bg-gray-100', 'dark:bg-gray-700']"
         class=""
     >
      // Этот ngIf никогда не срабатывает
     <ng-template *ngIf="item.children; else itemMenu">
        <ng-template *ngFor="let child of item.children">
             {{ child }}
        </ng-template>  
     </ng-template>
      //Это печатается                 
     <ng-template #itemMenu>
          {{item.title}}
     </ng-template>                     
</div>

введите сюда описание изображения

Ответы

▲ 0Принят

В общем надо заменить ng-template на div

 <ng-template *ngIf="item.children; else itemMenu">
    <ng-template *ngFor="let child of item.children">
         {{ child }}
    </ng-template>  
 </ng-template>
             
 <ng-template #itemMenu>
      {{item.title}}
 </ng-template>                     

на

<div *ngIf="item.children; else itemMenu">
        <div  *ngFor="let child of item.children">
             {{ child }}
        </div>  
     </div>
                 
     <ng-template #itemMenu>
          {{item.title}}
     </ng-template>                     
</div>