Question

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

当我点击带有星号图标的href时，我要做的是标记项目已完成。

使用javascript，我会做event.target或$（this）.hide（）或类似的。但我不确定如何使用angular2

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@color/...</item>
    <item name="windowActionModeOverlay">true</item>
    ...
</style>

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>

否则，集合中所有元素的内容都是全局的......

Answer 2

变量done绑定到使用此模板的Component，而不是list元素中。解决方案可能是为您的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上切换类错误

3 个答案: