angular2 ngFor内のアイコンを切り替える

Question

ngForを実行中にアイコンを切り替える方法を教えてください。

問題文： * ngForを使用して配列をループし、カテゴリ名を表示しています。 1日のクリックで、私はアコーディアンを開き、カテゴリーの詳細を表示する必要があります（私はこれを行うことができます）。 アコーディオンが開くと、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

私は右のあなたを理解していれば、あなただけの1 <i>代わりに2を持つのページで持つことができます。

テンプレート：

<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またはそれは、関連<i>要素のクリックで切り替えをトリガするようfa-minus

あなたの*ngFor temlpate内の任意のHTML要素に(click)="toggle[i] = !toggle[i]を置くことができます。

Answer 2

1）あなたは日が現在選択されている店舗の変数が必要になります。

public SelectedDay:string = null; 

2）選択した日が*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 (click)="SelectedDay=day">{{day}}</div> 

3）で確認してくださいこのようにする必要があります -

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

これは動作するはずです。