ngFor中的angular2切换图标 [英] angular2 toggle icons inside ngFor
问题描述
有人可以让我知道在进行ngFor时如何切换图标吗?
Can some one please let me know how to toggle icons while doing ngFor?
问题陈述: 我正在使用* ngFor遍历数组并显示类别名称.点击一天后,我需要打开一个手风琴并显示类别详细信息(我可以执行此操作). 当Accordian打开时,我需要将fa-plus图标替换为fa-minus,反之亦然,而我只需要在点击的日子这样做.
Problem Statement: I'm using *ngFor to loop through an array and display category names. On click of day I need to open an accordian and show category details (I can do this). Once accordian opens I need to replace fa-plus icon with fa-minus and vice-versa and I need to do this only for clicked day.
我如何有效地做到这一点?
How can I achieve this effectively?
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>
推荐答案
如果我理解的正确,那么您在页面上只能有一个<i>
而不是两个:
If I understand you right you can have just one <i>
on the page instead of having two:
模板:
<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
So you can toggle just toggle classes on that element to be fa-plus
or fa-minus
您可以将(click)="toggle[i] = !toggle[i]
放在*ngFor
temlpate中的任何html元素上,这样将触发相关<i>
元素的点击切换.
You can put (click)="toggle[i] = !toggle[i]
on any html element inside your *ngFor
temlpate so it will trigger the toggle on click for related <i>
element.
这篇关于ngFor中的angular2切换图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!