我如何在 output 中使用 ngFor 在 ZC31C335EF37283C45Z1B8178

Question

I have this json code how can i output HTML using *ngFor in angular 8. I have shown the HTML Structure too below. Help me to how can i use ngFor for generating like the html below. if menu array item has array of submenu then it must loop that array first.. suggest me..

    {
        "menu" : [
            {
                "item":"Home",
                "link":"/home"
            },
            {
                "item":"About Us",
                "link":"/aboutus"
            },
            {
                "item":"Services",
                "link":"#",
                "submenu":[
                    {"item":"Service One",
                    "link":"/one"
                    },
                    {"item":"Service Two",
                    "link":"/two"
                    },
                    {"item":"Service Three",
                    "link":"/three"
                    },
                    {"item":"Service Four",
                    "link":"/four"
                    },
                    {"item":"Service Five",
                    "link":"/five"
                    },
                    {"item":"Service Six",
                    "link":"/six"
                    }
                ]
            },
            {
                "item":"Portfolio",
                "link":"/portfolio"
            },
            {
                "item":"Blog",
                "link":"/blog"
            },
            {
                "item":"Contact Us",
                "link":"/contactus"
            }
        ] 
    }
    

html structure

<div class="menustrip">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <span class="hamburger text-right p-2 mt-2"><i class="fa fa-bars"></i></span>
                <ul class="menu nav">
                    <li class="nav-item"><a routerLink="home" class="nav-link">Home</a></li>
                    <li class="nav-item"><a routerLink="aboutus" class="nav-link">About Us</a></li>
                    <li class="nav-item has-childrens"><a ng-href="#" class="nav-link">Services <i class="fa fa-angle-down"></i></a>
                        <div class="gl-dropdown">
                            <ul class="megamenu">
                                <li class="megamenu-item"><a routerLink="/one" class="nav-link">Service One</a></li>
                                <li class="megamenu-item"><a routerLink="/two" class="nav-link">Service Two</a></li>
                                <li class="megamenu-item"><a routerLink="/three" class="nav-link">Service Three</a></li>
                                <li class="megamenu-item"><a routerLink="/four" class="nav-link">Service Four</a></li>
                                <li class="megamenu-item"><a routerLink="/five" class="nav-link">Service Five</a></li>
                                <li class="megamenu-item"><a routerLink="/six" class="nav-link">Service Six</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item"><a routerLink="/portfolio" class="nav-link">Portfolio</a></li>
                    <li class="nav-item"><a href="/blog" class="nav-link">Blog</a></li>
                    <li class="nav-item"><a routerLink="/contactus" class="nav-link">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</div> 

i have tried this

<div class="menustrip">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <span class="hamburger text-right p-2 mt-2"><i class="fa fa-bars"></i></span>
                <ul class="menu nav">
                    <li class="nav-item" *ngFor="let item of menuStr.menu">
                        <a *ngIf="item.submenu == undefined" [routerLink]=item.link class="nav-link">{{item.item}}</a> 
                        <a *ngIf="item.submenu !== undefined" routerLink="#" class="nav-link">{{item.item}} <i class="fa fa-angle-down"></i></a>
                            <div class="gl-dropdown">
                                <ul class="megamenu">
                                    <li class="nav-item" *ngFor="let subitem of item.submenu">
                                        <a [routerLink]=subitem.link class="nav-link">{{subitem.item}}</a>
                                    </li>
                                </ul>
                            </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div> 

I have tried above.. is there any way from which i can add the class has-childrens to li in case it has submenu..

Answer 1

Just Make a component which will handle this

like

nested-component.ts

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

export class NestedComponent implements OnInit {
    @Input() data:any;
    @Input() child: false;

    constructor() {}
    ngOnInit() {}
}

nested-component.html

<li class="child ? 'megamenu-item' : data.submenu.length ? 'nav-item has-childrens' : 'nav-item'">
 <a [routerLink] = "data.link" class="nav-link">{{data.item}}</a>
 <ng-container *ngIf="data.submenu?.length">
     <div class="gl-dropdown">
         <ul class="megamenu">
              <ng-container *ngFor="let child of data.submenu">
                  <app-nested-component [data]="child" [child]=true></app-nested-component>
             </ng-container>
         </ul>
     </div>
 </ng-container>
</li>

And then in your main html file

  <ng-container *ngFor="let item of menuStr.menu>
      <app-nested-component [data]="item" [child]=false></app-nested-component>
  </ng-container>

Working Example https://stackblitz.com/edit/angular-c3qzst