☰

Angular2 - クリック時にアイテムにクラスを追加する 質問する

tag-icon • tag-icon angular
Angular2 - クリック時にアイテムにクラスを追加する 質問する

リスト項目が多数あり、クリックされたらそれぞれをハイライト表示したいのですが、jQuery や JavaScript では簡単に実行できますが、Angular2 となるとどうしたらよいかわかりません。

<ul>
   <li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"> {{item}} </li>
</ul>

私のコンポーネント

export class HelloWorld {
    items = ["pineapples", "apples", "tomatoes", "bread"];

    highlightItem(event) {
        event.target.setAttribute("data-selected", "true");
   }

   isHighlighted(event) {
       return event.target.getAttribute("data-selected") == "true";
    }
}

どこに間違いがあるのか​​、間違った方法を使用しているのか分からない

ベストアンサー1

アイテムのハイライトステータスを保存するには、クラス内に配列を作成する必要があります。

hightlightStatus: Array<boolean> = [];

ngFor に関連付けられたテンプレートでローカル変数を宣言します。

<ul>
   <li [attr.data-selected]="false" 
       (click)="hightlightStatus[i]=!hightlightStatus[i]" 
       [class.highlight]="hightlightStatus[i]" 
       *ngFor="let item of items, let i = index"> 
       {{item}} 
   </li>
</ul>

おすすめ記事