在Angular中切换按钮箭头向上和向下箭头图标更改的Onclick？答案

【问题标题】：toggle Onclick of button arrow up and arrow down icon change in Angular?在Angular中切换按钮箭头向上和向下箭头图标更改的Onclick？
【发布时间】：2021-03-01 17:40:42
【问题描述】：

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

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

我看的是如果我们点击Monster箭头，这个箭头只需要上下切换，如果我们点击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;
  }

【问题讨论】：

标签： html css angular typescript angular-material

【解决方案1】：

将参数 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;
  }

【讨论】：

谢谢。你知道哪个弹出框最适合在角度中使用吗？

【解决方案2】：

在expansion-overview-example.html :-

<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>

在expansion-overview-example.ts 中：-

   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;
  }

编码愉快！！

【讨论】：