toggle class bug on list items angular2

Question

How can I rewrite this code so that I toggle the class '.done' only on the element clicked, not on the whole 'li' collection? The result of the following code is that all elements are toggled with the .done class at the same time:

What I'm trying to do is mark the item done, when the a href with a star icon is clicked.

With javascript, I would do event.target or $(this).hide(), or similar. But I'm not sure how to do it with 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

I would leverage a field on the element in the loop instead:

<li class="collection-item avatar"
    [ngClass]="{'done': set.isDone }"
    *ngFor='let set of newSetCollection; let i = index; let last = last'>

and toggle this property like this:

<a href="#" class="secondary-content" (click)="set.isDone = !set.isDone;">
  <i class="material-icons">grade</i>
</a>

Otherwise things are global to all elements of your collection...