js的map函数应用于菜单折叠

292 阅读1分钟

需求:菜单过多后,所有菜单都展示已经不太美观,要求只展开当前菜单页所在一级菜单。
分析:每个一级菜单绑定nzOpen属性,由于菜单是动态生成,api中 [(nzOpen)]="openMap.sub1"中的openMap对象数组被我换成简单的布尔数组,即openMap: boolean[] = [true],对应的nzOpen变为 [(nzOpen)]="openMap[i]" 。菜单点击事件(nzOpenChange)="openHandler('sub1')"变为(nzOpenChange)="openHandler(i)"
那么就简单了,只要在点击事件openHandler控制数组index属性下的布尔值就可以了。

for循环

openHandler(event: number) {
   for (let i = 0; i < this.openMap.length; i++) {
     if (i !== event) {
       this.openMap[i] = false;
     }
   }
 }

map函数

openHandler(event: number) {
  this.openMap = this.openMap.map((el, index) => {
    if (index !== event) {
      el = false;
    }
    return el;
  });
} 

情景很简单,这样就实现了。最后简化map函数

openHandler(event: number) {
  this.openMap = this.openMap.map((el, index) => index === event);
}