有人能让我知道如何在做ngFor时切换图标吗？
问题陈述:我使用*ngFor循环遍历数组并显示类别名称。在一天的点击，我需要打开一个手风琴和显示类别的细节(我可以这样做)。手风琴打开后，我需要用fa-减号代替fa+图标，反之亦然，我只需要在点击的一天这样做。
我怎样才能有效地做到这一点？
this.categoryList = [
{type: 'space', name: 'Space'},
{type: 'energy', name: 'Energy'},
{type: 'comfort', name: 'Comfort'},
{type: 'maintenance', name: 'Maintenance'},
{type: 'reporting', name: 'Reporting'}
];<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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-02 22:17:48
如果我对您的理解是正确的，您可以在页面上只使用一个<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 temlpate内的任何html元素上，从而触发单击相关<i>元素的切换。
Stack Overflow用户
发布于 2017-02-02 21:50:27
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>这应该能行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42017246
复制相关文章
腾讯云开发者
