如何防止（单击）将该类添加到ngFor中的所有元素？

Question

我有一个用ngFor动态构建的移动导航。在那个导航栏中，一些项目会有下降。在桌面上，这是通过悬停进行处理的。但是在手机上，我创建了一个点击事件。使用a：active不是我的用户体验团队的一个选择。我们希望用户点击导航项并能够打开和关闭下拉菜单。我遇到的问题是ngFor将点击导航项目，而不仅仅是具有下拉菜单项目的点击，当您点击它时，它会将该类别添加到所有元素中，从而打开所有下拉菜单，而不仅仅是你点击的那个孩子。

这里是我的html

<div id="mobNav" [ngClass]="{'toggleNav': isClassVisible}"> 
          <ul class="navList"> 
           <li class="root" *ngFor='let item of topMenu' (click)="toggleClass()" [ngClass]="{'more' : !item.url}"> 
            <a class="txt">{{item.name}}</a> 
            <!--Mobile--> 
            <ul *ngIf="!item.url" class="dropDown" [ngClass]="{'toggleMobileNav' : isMobileVisible}"> 
             <li *ngFor="let sItem of findChildren(item.tabID) " class="txt "> 
              <a href="{{ sItem.url }} ">{{ sItem.name }}</a> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </div> 

这里是我的方法，我打电话。这里没有什么特别

toggleClass(){ 
this.isMobileVisible = !this.isMobileVisible; 
if(this.isMobileVisible === true){ 
    console.log("class added"); 

}  else{ 
    console.log("class not added"); 
    } 

}

Answer 1

可以改变了一下HTML，为您的情况下创建单独的HTML，然后从<li>移动(click)到相应的元素。

样品（HTML结构也因此发生变化也CSS可能需要更改）：

toggleClass(item){ 
    item.isMobileVisible = !item.isMobileVisible; 
    if(item.isMobileVisible === true){ 
     console.log("class added", item); 

    }  else{ 
     console.log("class not added", item); 
    } 
}