angular2 toggle icons внутри ngFor

Question

Может кто-нибудь, пожалуйста, дайте мне знать, как переключать значки во время выполнения ngFor?

Устранение проблемы: Я использую * ngДля прокрутки массива и отображения имен категорий. В один клик дня мне нужно открыть информацию о согласии и показать категорию (я могу это сделать). Как только аккордеон открывается, мне нужно заменить значок fa-plus с помощью fa-minus и наоборот, и мне нужно сделать это только для нажатого дня.

Как я могу добиться этого эффективно?

this.categoryList = [ 
{type: 'space', name: 'Space'}, 
{type: 'energy', name: 'Energy'}, 
{type: 'comfort', name: 'Comfort'}, 
{type: 'maintenance', name: 'Maintenance'}, 
{type: 'reporting', name: 'Reporting'} 
]; 

HTML

<div class="{{category.type}}" *ngFor="let category of categoryList"> 
    <div data-toggle="collapse" [attr.href]="'#'+'category-'+category.type"> 
    <div class="title {{category.name}}">{{category.name}}</div> 
    <div> 
     <i class="fa fa-plus"></i> //needs to toggle between plus and minus 
       <i class="fa fa-minus"></i> //needs to toggle between plus and minus 
    </div> 
    </div> 

    <div class="collapse" id="category-{{category.type}}"> 
     //details 
    </div> 
</div> 

Answer 1

Если я правильно Вас понял вы можете иметь только один <i> на странице вместо того, чтобы иметь два:

шаблона:

<div *ngFor="let day of daysInAWeek; let i = index"> 
    <div>{{day}}</div> 
    <div> 
     <i class="fa" [ngClass]="toggle[i] ? 'fa-plus': 'fa-minus'" aria-hidden="true"></i> 
    </div> 
    <div class="details">Today is {{day}}</div> 
    <button (click)="toggle[i] = !toggle[i]">Toggle</button> 
</div> 

Ts:

daysInAWeek: string[] = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']; 
toggle = {}; 

Так вы можете переключаться только на классы для этого элемента: fa-plus или fa-minus

Вы можете поставить (click)="toggle[i] = !toggle[i] на любой HTML элемент внутри *ngFor temlpate так это вызовет тумблер на щелчок для соответствующего <i> элемента.

Answer 2

1) Вам понадобится переменная, которая хранит в какой день выбран в данный момент.

public SelectedDay:string = null; 

2) Затем по щелчку, установите выбранный день,

<div (click)="SelectedDay=day">{{day}}</div> 

3) Проверьте, если выбран день в тот же день в цикле с использованием *ngIf или hidden

<i class="fa fa-plus" *ngIf="SelectedDay!=day" aria-hidden="true"></i> 
    <i class="fa fa-minus" *ngIf="SelectedDay==day" aria-hidden="true"></i> 

Ваш окончательный HTML должен выглядеть так:

<div *ngFor="let day of daysInAWeek"> 
<div (click)="SelectedDay=day">{{day}}</div> 
<div> 
    <i class="fa fa-plus" *ngIf="SelectedDay!=day" aria-hidden="true"></i> 
    <i class="fa fa-minus" *ngIf="SelectedDay==day" aria-hidden="true"></i> 
</div> 
<div class="details">Today is {{day}}</div> 
</div> 

Это должно сработать.