ngForのすべての要素にクラスを追加しないようにするにはどうしたらいいですか？

Question

私はngForで動的に構築されたモバイルナビを持っています。そのnavでは、いくつかの項目がドロップダウンします。デスクトップでは、これはホバーで処理されます。しかしモバイルでは、私はクリックイベントを作成しました。 a：activeを使用することは、私のUXチームのオプションではありません。ユーザーはナビゲーション項目をクリックしてドロップダウンを開いて閉じることができます。私が抱えている問題は、ngForがドロップダウンを持つアイテムだけではなく、これまでのnavアイテムにクリックを置くことです。クリックすると、ドロップダウンですべての要素にクラスが追加されるので、すべてのドロップダウンが開かれます。あなたがクリックしたものの子です。

はここでここで私は呼び出しています私の方法で私の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> 

です。ここでは特別な何もあなたが対応する要素に<li>から(click)を移動し、その後、あなたのケースのために別のHTMLを作成し、ビットにHTMLを変更することができます

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

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

}

Answer 1

。

サンプル（HTML構造は、CSSを変更する必要があるかもしれませんもので、変更されました）：

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

また、あなたが個別に各項目を使用するために機能を変更することができます。

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

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