Печать меню и подменю в angular8 из json данных

Question

Я хочу напечатать меню и подменю снизу json ie.

О нас -> около 2,1

           about 2.2

Свяжитесь с нами -> контакт 1

           contact 2

           cont

обратная связь -> канал 1 -> канал 2

печать меню и подменю из json data '{"menuBean": {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu", "parentObjectIdHex": null, "path": [ {"objectIdHex": null, "label": "root"}], "subMenu": [{"objectIdHex": "5e7b2159a758800e908d8bc1", "label": "About Us"}, {"objectIdHex": "5e7b21dda7588be8 "," label ":" Contact Us "}, {" objectIdHex ":" 5e7c2eafa758800e908d8bc4 "," label ":" feedback "}]," level ": 1," textContent ":" "," contents ": [] }, "subMenuList": [{"objectIdHex": "5e7b2159a758800e908d8bc1", "label": "About Us", "parentObjectIdHex": "5e78a85fa758801914c3df8f", "path": [{"objectIdHex": nu ": nu": nu ": nu": ":" root "}, {" objectIdHex ":" 5e78a85fa758801914c3df8f "," label ":" Top Menu "}]," subMenu ": [{" objectIdHex ":" 5e7c4bc2a758800e908d8bd3 "," label ":" about 2.1 "}, {"objectIdHex": "5e7c4c21a758800e908d8bd4", "label": "about 2.2"}], "level": 2}, {"objectIdHex": "5e7c4bc2a758800e908d8bd3", "label": "about 2.1", "parentObjectIdHex": "5e7b2159a758800e908d8bc1", "path [: "objectIdHex": null, "label": "root"}, {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu"}, {"objectIdHex": "5e7b2159a758800e908d8bc1", "label": О нас "}]," subMenu ": []," level ": 3}, {" objectIdHex ":" 5e7c4c21a758800e908d8bd4 "," label ":" about 2.2 "," parentObjectIdHex ":" 5e7b2159a758800e908d8bc "", [{"objectIdHex": null, "label": "root"}, {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu"}, {"objectIdHex": "5e7b2159a758800e908d8bc1" "" label : "About Us"}], "subMenu": [], "level": 3}, {"objectIdHex": "5e7b21dda758800e908d8bc2", "label": "Contact Us", "parentObjectIdHex": "5e78a85fa758801914c3df8f", "path ": [{" objectIdHex ": null," label ":" root "}, {" objectIdHex ":" 5e78a85fa758801914c3df8f "," label ":" Top Menu "}]," subMenu ": [{" objectIdHex " : "5e7c3bd5a75880 0e908d8bd0 "," label ":" contact 1 "}, {" objectIdHex ":" 5e7c4b71a758800e908d8bd1 "," label ":" contact2 "}, {" objectIdHex ":" 5e7c4b8ca758800e908d8bd2 ", "label": "cont"}], "level": 2}, {"objectIdHex": "5e7c3bd5a758800e908d8bd0", "label": "contact 1", "parentObjectIdHex": "5e7b21dda758800e908d8bc2", "path" [{" objectIdHex ": null," label ":" root "}, {" objectIdHex ":" 5e78a85fa758801914c3df8f "," label ":" Top Menu "}, {" objectIdHex ":" 5e7b21dda758800e908d8bc2 "," label ":" Contact Us "}]," subMenu ": []," level ": 3}, {" objectIdHex ":" 5e7c4b71a758800e908d8bd1 "," label ":" contact2 "," parentObjectIdHex ":" 5e7b21dda758800e908d8bc2 "" ", path "objectIdHex": null, "label": "root"}, {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu"}, {"objectIdHex": "5e7b21dda758800e908d8bc2", "label": " Свяжитесь с нами "}]," subMenu ": []," level ": 3}, {" objectIdHex ":" 5e7c4b8ca758800e908d8bd2 "," label ":" cont "," parentObjectIdHex ":" 5e7b21dda758800e908d8bc2 "," path {"objectIdHex": null, "label": "root"}, {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu"}, {"objectIdHex": "5e7b21dda758800e908d8bc2", "label": " Свяжитесь с нами "}]," subMenu ": []," level ": 3}, {" objectIdHex ":" 5e7c2eafa758800e908d8bc4 "," label ":" feedback "," parentObjectIdHex ":" 5e78a85fa758801914c3df8f "," path ": {"objectIdHex": null, "label": "root"}, {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu"}], "subMenu": [{"objectIdHex": "5e7c2f8aa7588be08 "," label ":" feed 1 "}]," level ": 2}, {" objectIdHex ":" 5e7c2f8aa758800e908d8bc5 "," label ":" feed 1 "," parentObjectIdHex ":" 5e7c2eafa758800e908d8bc4: "" path [{"objectIdHex": null, "label": "root"}, {"objectIdHex": "5e78a85fa758801914c3df8f", "label": "Top Menu"}, {"objectIdHex": "5e7c2eafa758800e908d8bc4" "" label : "feedback"}], "subMenu": [{"objectIdHex": "5e7c32eba758800e908d8bc6", "label": "feed 2"}], "level": 3}, {"objectIdHex": "5e7c32eba758800ee88d8bc6", "label ":" feed 2 "," parentObjectIdHex ":" 5e7c2f8aa758800e908d8bc5 "," path ": [{" objectIdHex ": null," label ":" root "}, {" objectIdHex ":" 5e78a85fa758801914c "df8f "" : "Верхнее меню" }, { "objectIdHex": "5e7c2eafa758800e908d8bc4", "label": "feedback"}, {"objectIdHex": "5e7c2f8aa758800e908d8bc5", "label": "feed 1"}], "subMenu": [], "level": 4] ]} '

Answer 1

 <li *ngFor="let menu of menus; let i = index" [class.activeli]="menu.active" class="nav-item">

                    <!-- child menu had  -->
                    <a class="menu nav-link">
                        <p>{{ menu.label }}</p>
                    </a>
                    <ul class="submenu" #submenu [style.height.px]="menu.active ? submenu.scrollHeight : 0"
                        *ngIf="menu.subMenu>
                        <li *ngFor="let submenu of menu.subMenu">
                            <a href="javascript: void(0);">
                                <p>{{ submenu.label }}</p>
                            </a>
                        </li>
                    </ul>
</li>