Как ввести выпадающий список для значков без заголовка в навигационной панели в angular 7 - PullRequest
0 голосов
/ 11 июля 2019

Я использую Angular 7 и динамически создал Navbar, используя data.json. Я хотел, чтобы в topbaricons также было раскрывающееся меню для предупреждений.Torq и alertMessage.

Для других меню в панели навигации я использовал key в качестве меню и значение в качестве подменю, здесь описано, как обрабатывать только значения из data.json из сообщения и оповещения и назначать его в качестве раскрывающегося списка для сообщения и оповещения.

data.json:

{
    "Dashboard": [],
    "Shipment": [“CAR”, “BUS”, "Vehicle", "Railcar" ],
    "Admin": [“Settings”, "Partners", "Management”],
    “Message” : [“All Message”,”New Message”,”Read Message”],
    “Alert”: [“New”,”Old”,”resolved”]
}

Nav.component.html:

<nav class="navbar navbar-expand-md navbar-light appMenuBar">
    <a href="#" class=" appName">MY APP</a>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="nav-item " [ngClass]="{'liactive': selectedItem ==item}"  
                (click)="listClick($event, item)"  
                *ngFor="let item of menuJson | keys ; let i = index">
                <a class="nav-link appSubMenu" 
                         *ngIf="item.value.length==0" id="{{i}}">{{item.key}}</a>
                <a *ngIf="item.value.length!=0" href="#" 
                   class="nav-link dropdown-toggle appSubMenu" 
                   data-toggle="dropdown" id="{{i}}">
                    {{item.key}} &nbsp;
                    <img class = "chevDownTorq" src="assets/icons/chevron_down_torq.png"/>
                </a>
                <div class="dropdown-menu" >
                    <a href="javascript:void(0)" *ngFor="let item of item.value  " class="dropdown-item">{{item}}</a>
                </div>
            </li>     
        </ul>  
    </div>
    <div class="topbaricons" >
        <img class = "alertTorq" src="assets/icons/alerts_torq.png"> 
        <img class = "alertMessage" src="assets/icons/messages_torq.png" >    
    </div>
</nav>

Nav.component.ts:

import menuData from './data.json';   
menuJson: any;
ngOnInit() {
    this.submenuActive = "";
    this.menuJson = menuData;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...