Как применить цвета для развернутого и свернутого тугоугольного переключателя 2 - PullRequest
Новая
       31

Как применить цвета для развернутого и свернутого тугоугольного переключателя 2

0 голосов
/ 01 июля 2018

enter image description here Ниже приведен мой код для функции переключения. Я хочу применить цвета, такие как серый цвет, когда он находится в развернутом состоянии, и черный цвет, когда он находится в свернутом состоянии. Как мне этого добиться? 

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

1 Ответ

0 голосов
/ 02 июля 2018

Я не уверен, правильно ли вы используете [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

РЕДАКТИРОВАТЬ: обновлено с некоторыми деталями.

...