このコードを書き直して、「li」コレクション全体ではなく、クリックされた要素でのみクラス「.done」を切り替えるにはどうすればよいですか？次のコードの結果は、すべての要素が.doneクラスで同時に切り替えられることです。
私がやろうとしているのは、星のアイコンが付いたhrefがクリックされたときに、アイテムに完了のマークを付けることです。
javascriptを使用すると、event.targetまたは$（this）.hide（）などを実行します。しかし、angular2でそれを行う方法がわかりません
<div *ngIf="selectedSet">
<ul class="collection">
<li class="collection-item avatar" [ngClass]="{'done': isDone }" *ngFor='let set of newSetCollection; #i = index; #last = last'>
<img src="{{set.pic_left}}" alt="" class="circle">
<div class="collection-content">
<span class="title">{{set.sets}} {{set.name}}</span>
<table>
<tr>
<th>Effected:</th>
<td><span> {{set.MainMuscleWorked}}</span> <!--span>, Middle Back, Triceps</span--></td>
</tr>
<tr>
<th>Use:</th>
<td><span>{{set.Equipment}}</span></td>
</tr>
</table>
</div>
<a href="#" class="secondary-content" (click)="isDone = !isDone;"><i class="material-icons">grade</i></a>
</li>
</ul>
</div>
代わりに、ループ内の要素のフィールドを活用します。
<li class="collection-item avatar"
[ngClass]="{'done': set.isDone }"
*ngFor='let set of newSetCollection; let i = index; let last = last'>
このプロパティを次のように切り替えます。
<a href="#" class="secondary-content" (click)="set.isDone = !set.isDone;">
<i class="material-icons">grade</i>
</a>
それ以外の場合、物事はコレクションのすべての要素に対してグローバルです...
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加