如何使用ngFor让折叠板在Angular中多次循环
如何使用ngFor让折叠板在Angular中多次循环
提问于 2018-07-02 00:45:33
我有下面的代码来创建使用加号和减号图标的折叠面板。我也处理了切换功能。但是现在我想在ngFor中为多个元素集循环这个函数。我不知道该怎么做。基本上我有一个resultArray，它是一个json。我需要循环通过resultArray json来获得标题和描述，并将其作为折叠标题和折叠描述。我不确定如何动态替换accord.id。
HTML
<div *ngFor = "let resulArray of resultArray">
<div *ngFor="let accord of accordian;">
<div (click)="toggle(accord.id)" id="accordionTitle{{accord.id}}" class="accordionTitle active">{{accord.label}}
<i class="fa fa-minus" id="minus{{accord.id}}"></i>
</div>
<div id="{{accord.id}}" *ngIf="accord.id == 0" class="hidden-data show">
</div>
</div> 下面的切换是将样式和图标从加号更改为减号应用到手风琴。何时调用切换函数
ts。
this.accordian = [{
id: 0, label: 'Accordion title'
}];
toggle(id) {
this.x = document.getElementById(id);
this.y = document.getElementById('accordionTitle' + id);
if (this.x.className.indexOf('show') === -1) {
this.x.className += ' show';
this.y.className += ' active';
document.getElementById('minus' + id).classList.remove('fa-plus');
document.getElementById('minus' + id).classList.add('fa-minus');
} else {
/* this.x.className = this.x.className.replace('hide', ''); */
this.x.className = ' hide';
/* this.y.className = this.y.className.replace('', ''); */
this.y.className = 'accordionTitle';
document.getElementById('minus' + id).classList.remove('fa-minus');
document.getElementById('minus' + id).classList.add('fa-plus');
}
}JSON
resultArray = {
'status': 'SUCCESS',
'responseCode': '000',
'errorMessage': null,
'cboRequestList': [
{
'seqNo': 1,
'applicableFor': '0',
'applicableForText': 'Hide',
'displayDesc': null,
'displaySeqNo': 1,
'description': 'ABCDisplayDesc1',
'type': 'W',
'content': null,
'field1': null,
'field2': null,
'field3': null,
'field4': null,
'markerId': null,
'markerLastModifiedTime': null,
'countryCode': null,
'languageCode': null,
'commentMaker': null
},
{
'seqNo': 2,
'applicableFor': '0',
'applicableForText': 'Hide',
'displayDesc': null,
'displaySeqNo': 1,
'description': 'ABCDisplayDesc1',
'type': 'W',
'content': null,
'field1': null,
'field2': null,
'field3': null,
'field4': null,
'markerId': null,
'markerLastModifiedTime': null,
'countryCode': null,
'languageCode': null,
'commentMaker': null
}
],
}回答 1
Stack Overflow用户
发布于 2018-07-02 02:05:45
<div class="row justify-content-md-center businessOffice">
<div class="col-md-9 business">
<h3 class="mainTitile">Help</h3>
<p class="bottom-30">
How may i help you today ?
</p>
<div *ngFor="let resultArrayText of cboRequestListArray; let i = index">
<ul class="list-group bottom-30" (click)="toggle[i] = !toggle[i]">
<li class="list-group-item" ng-class="{'activateToggle': toggle[i], '': !toggle[i]}" >
{{resultArrayText.description}}
<i class="fa" [ngClass]="toggle[i] ? 'fa-plus': 'fa-minus'" aria-hidden="true"></i>
</li>
<div *ngIf="!toggle[i]" class="container activateToggle">
<p class="content-30">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
</p>
<p>
<strong>Refer for more informations:</strong> <a>Click View Documents</a>
</p>
</div>
</ul>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51125176
复制相关文章
相似问题