ng2中的angular2切換圖標For

有人可以讓我知道如何在ngFor中切換圖標嗎？ng2中的angular2切換圖標For

問題聲明：我正在使用* ngFor來遍歷數組並顯示類別名稱。點擊一天，我需要打開一個手風琴，並顯示類別的細節（我可以做到這一點）。一旦手風琴打開，我需要用fa-minus代替fa-plus圖標，反之亦然，我只需要在點擊的日子裏這樣做。

我該如何有效實現這一目標？

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>

來源

2017-02-03 Pratap A.K

您是否在使用手風琴jQuery？ –

@RehbanKhatri Bootstrap !!手風琴是好的，它的工作！只有我需要知道如何切換fa-plus和fa-minus。 –

請出示您的手風琴代碼，也許有一個可以使用的狀態變量！ :) – mxii

如果我理解你的權利，你可以在頁面中不是有兩個上只有一個<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]放在您的*ngFor模板內的任何html元素上，以便觸發相關<i>元素的點擊切換。

來源

2017-02-03 06:17:48 Kuncevic

我試過了您的解決方案，但它的切換圖標爲所有類別。請看附件屏幕截圖。謝謝 –

是的，你說得對。我修改了代碼，現在它只適用於使用索引的每個項目 – Kuncevic

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>

這應該起作用。

來源

2017-02-03 05:50:27

ng2中的angular2切換圖標For

回答

相關問題