在列表项 angular2 上切换 class 错误

Question

如何重写此代码，以便仅在单击的元素而不是整个 'li' 集合上切换 class '.done'？以下代码的结果是所有元素同时与 .done class 切换：

我想做的是在单击带有星形图标的 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>

否则，您的 collection...

的所有元素都是全局的

Answer 2

变量 done 绑定到使用此模板的 Component，而不是在列表元素内。一个解决方案可能是向您的 set 模型添加一个额外的参数并将您的模板更改为：

<div *ngIf="selectedSet">  
   <ul class="collection">
      <li class="collection-item avatar" [class.done]="set.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)="set.isDone = !set.isDone"><i class="material-icons">grade</i></a>
      </li>
   </ul>
</div>

Answer 3

您可以设置索引并在 ngClass:

中使用它，而不是设置布尔标志

    <div *ngIf="selectedSet">  
        <ul class="collection">
            <li class="collection-item avatar" [ngClass]="{'done': isDone === i }" *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 = i"><i class="material-icons">grade</i></a>
            </li>
        </ul>
    </div>

在列表项 angular2 上切换 class 错误

toggle class bug on list items angular2

javascript

angular

ng-class