如何为角度2中的展开和折叠切换应用颜色

Question

下面是我的切换功能代码，我想在展开状态下应用灰色等颜色，而在折叠状态下应用黑色。我该如何实现？

    <div *ngFor="let point of points; let i = index">
      <ul class="list-group bottom-30">
        <li class="list-group-item" style="margin-top: 15px;" (click)="toggle[i] = !toggle[i]">
          {{points.description}}
          <i class="fa" style="float:right" [ngClass]="{'fa-plus': toggle[i], 'fa-minus': !toggle[i]}" aria-hidden="true"></i>
        </li>

      </ul>
    </div>

Answer 1

我不确定您是否正确使用了[ngClass]，建议您直接将其传递给字符串。

我建议使用CSS并使用[NgClass] ref

调用函数

HTML

<li 
  class="list-group-item" 
  style="margin-top: 15px;" 
  (click)="toggle[i] = !toggle[i]"
>
  {{points.description}}
  <i 
    class="fa" 
    style="float:right" 
    [ngClass]="getClass(toggle[i])" 
    aria-hidden="true"
  ></i>
</li>

TS

public toggle = {};

public getClass(toggle) {
    return toggle ? 'fa-plus toggled' : 'fa-minus someOtherClass';
}

CSS

.toggled {
    color: red;
 }

另一种可能性是使用ngStyle ref

<i [ngStyle]="{'color.red': !toggled}"></i>

这是堆叠闪电战：

https://stackblitz.com/edit/angular-evm3bu

编辑：已更新一些细节。