Angular 5如何在同一函数中实现单次只显示/隐藏一个元素？

这个问题很常见啦，核心原因是你现在用了同一个isHidden变量控制两个div的显示隐藏，不管点哪个按钮，都会切换这个变量的值，自然两个div会一起变化。下面给你两种实用的解决方案：

方案一：为每个元素单独维护状态（适合少量元素场景） #

如果只有这两个元素，最简单的方式就是给每个元素分配独立的状态变量和切换方法：

TypeScript代码修改： #

// 为每个元素定义独立的隐藏状态
isHidden1 = true;
isHidden2 = true;

// 分别对应两个按钮的切换方法
showStuff1() {
  this.isHidden1 = !this.isHidden1;
}

showStuff2() {
  this.isHidden2 = !this.isHidden2;
}

HTML代码修改： #

注意哦，你原来第二个按钮的(click)绑定写错了，要改成合法的方法名，同时每个div绑定对应的状态变量：

<button (click)="showStuff1()">Show Example</button>
<div [hidden]="isHidden1">Example 1: I like puppies.</div>

<button (click)="showStuff2()">Show Example</button>
<div [hidden]="isHidden2">Example2: I like horses.</div>

方案二：用数组/对象统一管理状态（适合多元素场景） #

如果以后可能要新增更多类似的元素，用数组来管理状态会更灵活，不用每次都加新变量和方法：

TypeScript代码修改： #

// 用数组存储每个元素的隐藏状态，初始都为true（隐藏）
itemStates = [true, true];

// 接收索引参数，切换对应位置的状态
toggleItem(index: number) {
  this.itemStates[index] = !this.itemStates[index];
}

HTML代码修改： #

每个按钮传递对应的索引，div绑定数组中对应位置的状态：

<button (click)="toggleItem(0)">Show Example</button>
<div [hidden]="itemStates[0]">Example 1: I like puppies.</div>

<button (click)="toggleItem(1)">Show Example</button>
<div [hidden]="itemStates[1]">Example2: I like horses.</div>

这样以后新增第三个元素，只要在itemStates数组里多加一个true，再复制一套按钮和div并把索引改成2就行，非常方便。

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