按一下按钮上箭头和箭头向下图标的角度变化？

Question

我想切换垫图标点击箭头，它应该向上和再次点击相同的垫图标，箭头应该向下。

用于参考堆栈闪电战：- https://stackblitz.com/edit/angular-fnvhnn-jtlqod?file=app%2Fexpansion-overview-example.html

我所看到的是，如果我们点击怪物箭头，这个箭头只需要上下切换，如果我们点击Roach箭头，这个箭头只需要上下切换，那么请帮助我们如何在角度上实现这一点？

请查看以下代码以供参考：

<div style="display: flex;justify-content: space-evenly;">
    <div *ngFor="let value of cricketList">
        <p (click)='clickOntab(tab)' >{{value.player}}</p>
    <button class="staticIcon"   (onShown)="onPopoverShown()" mat-icon-button>
        <mat-icon *ngIf="!showLess" (click)="showResult(hub)">expand_more</mat-icon>
            <mat-icon *ngIf="showLess" (click)="hideResult(hub)">expand_less</mat-icon>
     </button>  
    </div>
</div>

样本数据：-

 cricketList = [
    {
      player: "Monster",
      category: "basket"
    },
    {
      player: "Roach",
      category: "cricket"
    },
    {
      player: "Messi",
      category: "football"
    },
    {
      player: "Ms",
      category: "carrom"
    },
    {
      player: "Fedral",
      category: "tennis"
    }
        
  ];

切换方法

showResult(){
   
    let showLess = true;
  }

  hideResult() {
    let showLess = false;
  }

Answer 1

将param bool添加到数组中的每个项并更改该项。

cricketList = [
    {
      player: "Monster",
      category: "basket",
      showLess:false
    },
    {
      player: "Roach",
      category: "cricket",
      showLess:false
    },
    {
      player: "Messi",
      category: "football",
      showLess:false
    },
    {
      player: "Ms",
      category: "carrom",
      showLess:false
    },
    {
      player: "Fedral",
      category: "tennis",
      showLess:false
    }
        
  ];

在html中更改以下内容

<div style="display: flex;justify-content: space-evenly;">
    <div *ngFor="let value of cricketList">
        <p (click)='clickOntab(tab)'>{{value.player}}</p>
        <button class="staticIcon"   (onShown)="onPopoverShown()" mat-icon-button>
        <mat-icon *ngIf="!value.showLess" (click)="showResult(value)">expand_more</mat-icon>
            <mat-icon *ngIf="value.showLess" (click)="hideResult(value)">expand_less</mat-icon>
     </button>
    </div>
</div>

在组件中

showResult(param){
   
    param.showLess = true;
  }
  hideResult(param) {
    param.showLess = false;
  }

Answer 2

在扩展中-概述-示例. :-

<div style="display: flex;justify-content: space-evenly;">
    <div *ngFor="let value of cricketList; let i = index">
        <p (click)='clickOntab(tab)' >{{value.player}}</p>
    <button class="staticIcon" (onShown)="onPopoverShown()" (click)="toggleResult(i)" mat-icon-button>
        <mat-icon *ngIf="value.showMore">expand_more</mat-icon>
        <mat-icon *ngIf="!value.showMore">expand_less</mat-icon>
     </button>  
    </div>
</div>

在扩展方面-概览-例子:-

   cricketList = [
    {
      player: "Monster",
      category: "basket",
      showMore: false
    },
    {
      player: "Roach",
      category: "cricket",
      showMore: false
    },
    {
      player: "Messi",
      category: "football",
      showMore: false
    },
    {
      player: "Ms",
      category: "carrom",
      showMore: false
    },
    {
      player: "Fedral",
      category: "tennis",
      showMore: false
    }
        
  ];

  toggleResult(i) {
    this.cricketList[i].showMore = !this.cricketList[i].showMore;
  }

编码愉快！！