angular循环遍历的数据需要展开收起

一、效果案例

在这里插入图片描述
备注：数据为动态获取循环遍历的

二、出现问题

循环遍历导致我点击一个展开，其他的数据跟着变动

三、解决办法

在遍历的数组中添加字段表示"展开", 然后通过下标控制展开收起

四、案例代码

html
在这里插入图片描述

ts
在这里插入图片描述

五、代码展示

html

  <div class="detail-item" *ngFor="let item of urgeRecords  index as i">
      <h3>{
   
   {item.createTime.split(" ")[0]}}催办 <span class="operatesUrge" (click)="operateUrgeEdit(item,i)">{
   
   {item.operateUrge}}</span></h3>
      <div class="detailCon" padding *ngIf="operateUrgeIndex == i && item.operateUrge == '收起'">
        <ul>
          <li>逾期原因：{
   
   {item.reason}}</li>
          <li>下次催办：{
   
   {item.nextUrgeTime}}</li>
        </ul>
      </div>
    </div>

 operateUrgeIndex:Number=0;


 ionViewDidLoad() {
    console.log('ionViewDidLoad BusinessPressDetailsPage');
    this.getUrgeDetail()
  }

  operateUrgeEdit(item,i) {
    this.operateUrgeIndex = i
     item.operateUrge = item.operateUrge == '展开' && this.operateUrgeIndex == i?  '收起' : '展开'
  }
  getUrgeDetail() {
    this.urgeService.getQueryUrgeDetail(this.delayType, this.erpIntentionId).subscribe(resp => {
      this.urgeRecords = resp.urgeRecords
      this.dealInfo = resp.dealInfo
       this.urgeRecords.forEach((item,i)=>{
         item["operateUrge"] = '展开'
         console.log("item==forEach",item)
       })
    }, () => {

    });
  }

六、出现问题

写到这里，出现了一个小问题
在这里插入图片描述
我点完某个展开的时候直接不点收起而是点击另外一个展开，这时出现了如上情况

七、解决办法

在这里插入图片描述
问题出现在了这个判断条件上，我点击另一个展开的时候吧上一个展开也给控制了，所以把这个条件去掉就ok啦~

   <div class="detail-item" *ngFor="let item of urgeRecords  index as i">
      <h3>{
   
   {item.createTime.split(" ")[0]}}催办 <span class="operatesUrge" (click)="operateUrgeEdit(item,i)">{
   
   {item.operateUrge}}</span></h3>
      <div class="detailCon" padding *ngIf="item.operateUrge == '收起'">
        <ul>
          <li>逾期原因：{
   
   {item.reason}}</li>
          <li>下次催办：{
   
   {item.nextUrgeTime}}</li>
        </ul>
      </div>
    </div>

八、查看最终效果

在这里插入图片描述
点击展开的时候不让自动隐藏