参见英文答案 >
Hide/show individual items inside ngFor5个
有人可以让我知道如何在执行ngFor时切换图标吗？
有人可以让我知道如何在执行ngFor时切换图标吗？
问题陈述：
我正在使用* 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>
如果我理解你,你可以只有一个< 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
您可以在* ngFor temlpate中的任何html元素上放置(click)=“toggle [i] =！toggle [i],这样它就会触发点击相关< i>元素的切换.