javascript - 切换列表项上的类错误 Angular2

Question

如何重写此代码，以便仅在单击的元素上切换类“.done”，而不是在整个“li”集合上切换？以下代码的结果是所有元素同时使用 .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> 

Answer 1

我会利用循环中元素上的字段:

<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>

否则，对于您集合中的所有元素来说，事物都是全局的...