0

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

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

6
  • Проверьте переменную children, которую вы используете в шаблоне, на то, что она является массивом. Если это не массив, то ngFor не сможет работать с ним. И проверь есть ли данные в children. Если нет, то шаблон ngIf не будет отображаться. И уще попробуй двойным круглым скобками {{ child }} для отображения дочерних элементов, вместо использования тега ng-template. 25 янв в 8:15
  • В консоли написано что children array, я также делал {{item.children?.length}} и он= 2. почему то не срабатывает *ngFor="let child of item.children", я в замешательстве(
    – BorsheC
    25 янв в 8:28
  • Когда я печатаю {{ item.children }} он почему то пустой, но при этом в консоли я вижу, что там есть дата
    – BorsheC
    25 янв в 8:29
  • Массив children инициализируется до отображения шаблона? Или может перезаписывается во время выполнения. На всякий скажу оператор async в связке с ngFor, он не поддерживает асинхронные данные. 25 янв в 8:44
  • массив инициализирую перед конструктором в компоненте menuPublic: menuPublic[] = menuPublicData Также пробывал инициализировать в ngOnInit , результат тот же
    – BorsheC
    25 янв в 8:51

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.