循环 – ng中的angular2切换图标
发布时间:2020-12-17 07:36:08 所属栏目:安全 来源:网络整理
导读:参见英文答案 Hide/show individual items inside ngFor5个 有人可以让我知道如何在执行ngFor时切换图标吗? 问题陈述: 我正在使用* ngFor循环遍历数组并显示类别名称.点击一天,我需要打开一个手风琴并显示类别详细信息(我可以这样做). 一旦手风琴打开,我需
参见英文答案 >
Hide/show individual items inside ngFor5个
有人可以让我知道如何在执行ngFor时切换图标吗? 问题陈述: 我怎样才能有效实现这一目标? 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>元素的切换. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- Getting Started with AngularJS 1.5 and ES6: p
- angular – 无法使用API??获取的数据初始化ngx图
- scala – Spark ML – 保存OneVsRestModel
- 重复eval T => scala.concurrent.Future [T]到一
- 使用system(3)运行bash脚本未收到信号
- .NET快速开发整合框架(RDIFramework.NET)试用申
- scala – 如何将数组[Row]转换为DataFrame
- webservice:使用urlConnection操作webservice
- angular – 订阅限制结果
- docker_toolbox使用阿里加速
热点阅读