在列表项angular2上切换类错误答案

【问题标题】：toggle class bug on list items angular2在列表项angular2上切换类错误
【发布时间】：2016-07-18 14:39:56
【问题描述】：

如何重写此代码，以便仅在单击的元素上切换类“.done”，而不是在整个“li”集合上切换？以下代码的结果是所有元素同时使用 .done 类进行切换：

当单击带有星形图标的 a 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>

【问题讨论】：

标签： javascript angular ng-class

【解决方案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>

否则，您的收藏中的所有元素都是全局的...

【讨论】：

【解决方案2】：

您可以设置索引并在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>

【讨论】：

Right :) 如果您想维护每个项目的状态，则需要将其添加到 set 或维护 isDone 开头的 newSetCollection 数组。

【解决方案3】：

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

【讨论】：