需求:菜单过多后,所有菜单都展示已经不太美观,要求只展开当前菜单页所在一级菜单。
分析:每个一级菜单绑定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);
}