web-dev-qa-db-ja.com

ngFor angular 2のonclickにアクティブなクラスを与える

こんにちは、順序付けられていないリストがあり、すべてにアクティブなクラスがあります。リスト項目をクリックしたときにアクティブなクラスを切り替えたい。私のコードはこんな感じ

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules" class="active">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

誰も私がこれを行うのを助けることができますか？

angularng-classngfor
10
Vugar Ahmadov

次のようなことができます：

<ul class="sub_modules">
  <li (click)="activateClass(subModule)"
      *ngFor="let subModule of subModules"
      [ngClass]="{'active': subModule.active}">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

オンコンポーネント

activateClass(subModule){
  subModule.active = !subModule.active;    
}

Ngクラスでは、最初のプロパティは追加するクラスであり、2番目のプロパティは条件です。

18
Eduardo Vargas

インデックスプロパティを作成するだけです。つかいます let i = index（クリック）イベントを使用してインデックスを設定します。次に、selectedIndex === iはいの場合、クラスを「アクティブ」にtrueに設定

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules; let i = index" 
      [class.active]="selectedIndex === i" 
      (click)="setIndex(i)">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

次に、TypeScriptファイルで、selectedIndexを設定します。

export class ClassName {
   selectedIndex: number = null;

   setIndex(index: number) {
      selectedIndex = index;
   }
}
19
doppelgunner

ここであなたの答えを見つけることができると信じています： AngularJs-クリック時にアクティブなクラスを追加するためのベストプラクティス（ng-repeat）

Angularの$indexを使用して、CSSをターゲットにしてアイテム/オブジェクトに適用できます。この投稿では、私ができる以上にロジックを説明し、実証しています。

0
Patrick McDermott