在Angular中单击时显示/隐藏<ul>
在Angular中单击时显示/隐藏<ul>
提问于 2018-04-03 16:21:59
我正在尝试在HTML上显示菜单。目前，它正在显示所有子菜单选项。我想让它显示所点击项目的选项。
下面是我的home.html代码
<ul class="navbar-nav">
<li data-toggle="dropdown" class="nav-item" *ngFor="let page of list;let i = index" id="id{{page.link_id}}"><span (click)="showsubmenu(i)">{{page.link_name}}<i class="iconn" *ngIf="page.flg[0].SHOW_ICON=='YES'"><ion-icon name="md-arrow-dropdown"></ion-icon></i></span>
<ul *ngFor="let sublink of page.sublink; let j=index;"><li >{{sublink.SUBLINK_NAME}}</li></ul>
</li>
</ul>默认情况下会出现子菜单选项，请参见下面的屏幕截图：
home.ts代码如下：
export class HomePage {
list = [];submenu;
json_data = [
{"link_id":"38","link_name":"Contact","flg":[{"SHOW_ICON":"NO"}],"sublink":[]},
{"link_id":"37","link_name":"Offices","flg":[{"SHOW_ICON":"YES"}],"sublink":[{"SUBLINK_NAME":"test11","SUBLINK_OF":"37","SUBLINK_ID":"10005"}]},
{"link_id":"34","link_name":"Products","flg":[{"SHOW_ICON":"YES"}],"sublink":[{"SUBLINK_NAME":"Quick Patrol","SUBLINK_OF":"34","SUBLINK_ID":"10004"},{"SUBLINK_NAME":"Link2","SUBLINK_OF":"34","SUBLINK_ID":"10013"}]},
{"link_id":"33","link_name":"Home","flg":[{"SHOW_ICON":"NO"}],"sublink":[]}
];
constructor(public navCtrl: NavController) {
this.list = this.json_data;
}
showsubmenu(index){
this.submenu= this.list[index]["link_id"];
console.log(this.submenu);
this.submenu=this.list[index]["sublink"];
console.log(this.submenu.length);
}
}回答 1
Stack Overflow用户
发布于 2018-04-03 16:47:01
<ng-container *ngIf="page.flg[0]=='NO'?null:true"><ul *ngFor="let sublink of page.sublink; let j=index;"><li >{{sublink.SUBLINK_NAME}}</li></ul></ng-container>在*.ts中，您可以添加
showsubmenu(index) { this.list[index]['flg'][0] === 'NO'? 'YES' : 'NO'; }
最好将'flg‘key保持为布尔值，而不是字符串数组。您可以在html本身中处理flg键值，而不是'showsubmenu()'，如下所示：
(click)="page.flg?null:true"
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49625412
复制相关文章
相似问题
腾讯云开发者
