В компоненте я хочу построить меню из данных 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>