在 Angular 中单击时显示/隐藏 <ul>答案

【问题标题】：Show / hide <ul> on click in Angular在 Angular 中单击时显示/隐藏 <ul>
【发布时间】：2018-08-12 01:29:43
【问题描述】：

我正在尝试在 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);

  }
}

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

引入一个新属性，它将保留打开的菜单索引。使用ngIf 切换显示/隐藏子菜单：

HTML：

//First li
<li (click)="show === i ? show =- 1: show = i" ....>

//second li
<li *ngIf="show === i">....

打字稿：

...
show = -1;
...

DEMO

【讨论】：

工作就像一个魅力，我怎么能隐藏（ul）点击任何地方，目前它从同一个按钮打开和关闭，请指导
单击任何其他 li / 菜单会关闭它。您希望从页面上的任何位置关闭？

【解决方案2】：

<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'键保留为布尔值而不是字符串数组会更好。而不是 'showsubmenu()'，您可以在 html 本身中处理 flg 键值，如下所示：

(click)="page.flg?null:true"

【讨论】：