løkker - angular2 bytte ikoner inni ngFor

Kan noen være så snill å fortelle meg hvordan man bytter ikoner mens man bruker ngFor?

Problemstilling: Jeg bruker *ngFor for å gå gjennom et array og vise kategorinavn. Ved klikk på dag trenger jeg å åpne en akkordion og vise kategoridetaljer (dette kan jeg gjøre). Når akkordionen åpnes, må jeg bytte fa-plus-ikonet med fa-minus og omvendt, og jeg trenger å gjøre dette kun for den klikkede dagen.

Hvordan kan jeg oppnå dette effektivt?

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>

Svar #1

Hvis jeg forstår deg riktig, kan du ha bare én <i> på siden i stedet for å ha to:

mal:

<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 = {};

Så du kan bare veksle klasser på det elementet til å være fa-plus eller fa-minus

Du kan sette (click)="toggle[i]=!toggle[i] på et hvilket som helst HTML-element inne i ditt *ngFor-mal slik at det vil utløse bryteren ved klikk for relatert <i>-element.

Relaterte artikler