Angular实现点击列表项仅展示对应项额外信息的方法

问题原因 #

你当前用了全局唯一的hide变量控制所有产品的显隐状态，修改该变量会同步影响所有产品的显隐逻辑，所以会出现点击任意产品全部展开的问题。

修改方案 #

给每个产品单独分配显隐控制属性，独立控制自身的展开收起状态，调整后的代码如下：

调整后TS代码 #

export class Basic implements OnInit {
  products:any[];
  constructor() {
      this.products=[
      {
        name:"Mac Book Pro",
        price:"1000",
        color:"grey",
        // 新增单个产品的显隐控制属性，默认隐藏额外信息
        hide: true
      },
      {
        name:"iPhone",
        price:"700",
        color:"black",
        hide: true
      }
    ]
 }

  ngOnInit(): void {
  }
  
  // 接收点击的产品实例作为参数，单独修改该产品的显隐状态
  toggle(product: any){
    product.hide = !product.hide;
  }
}

调整后HTML代码 #

<div *ngFor="let x of products">
    <!-- 点击时把当前产品项传入toggle方法 -->
    <div (click)="toggle(x)">{{x.name}}</div>
    <!-- 绑定当前产品自身的hide属性 -->
    <div [hidden]="x.hide">
        {{x.price}}
        {{x.color}}
    </div>
</div>

实现逻辑 #

调整后每个产品的显隐状态完全由自身的hide属性控制，修改单个产品的状态不会对其他产品产生影响，即可实现点击对应产品仅展开自身额外信息的需求。

内容的提问来源于stack exchange，提问作者CroatiaHR