Angular4循环内实现点击按钮显示对应内容并隐藏其他内容求助

嘿，我来帮你搞定这个点击按钮切换显示对应内容的需求～先看看你原代码里的几个小问题：

• 模板里showContent(this)的写法不对，Angular模板里调用方法不需要传this，而且你需要传递的是当前区块的索引，用来标记要显示哪一个；
• 组件类里的方法参数是evt，但你用的是event，这会导致报错；
• 直接操作DOM（event.target.style.display）不符合Angular的数据流理念，我们应该用数据绑定来控制显示隐藏，这样更符合框架的最佳实践。

下面是修正后的完整实现：

第一步：组件类（TS代码） #

我们需要一个变量来跟踪当前激活的区块索引，然后写方法来更新这个索引：

export class AppComponent {
  // 初始化激活索引为-1，表示初始所有内容都隐藏
  activeIndex: number = -1;

  showContent(index: number): void {
    // 如果点击的是当前激活的区块，就切换隐藏；否则设置为当前索引
    this.activeIndex = this.activeIndex === index ? -1 : index;
    // 如果不需要切换隐藏，只想点击显示当前、隐藏其他，就直接写：
    // this.activeIndex = index;
  }
}

第二步：模板（HTML代码） #

用*ngFor循环生成区块，按钮点击时传递当前索引，内容区块通过*ngIf判断是否显示：

<div *ngFor="let number of [0,1,2,3,4] ; let i = index"> 
  <div> 
    <button (click)="showContent(i);"> Click Me {{i}} </button> 
    <!-- 只有当activeIndex等于当前索引i时，才显示内容 -->
    <div class="content" *ngIf="activeIndex === i"> Hello world {{i}}</div> 
  </div>
</div>

额外说明 #

• 如果希望初始状态下第一个区块的内容是显示的，只需要把activeIndex的初始值设为0即可；
• 如果你想用[hidden]指令代替*ngIf，可以把内容区块的代码改成：

  <div class="content" [hidden]="activeIndex !== i"> Hello world {{i}}</div>
  

  注意*ngIf是直接从DOM中移除元素，而[hidden]只是通过CSS隐藏元素，根据你的需求选择即可。

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