Angular 2 - 点击显示和隐藏答案

【问题标题】：Angular 2 - Click to show and hideAngular 2 - 点击显示和隐藏
【发布时间】：2017-04-21 14:11:56
【问题描述】：

我想使用一个按钮来显示和隐藏我的 HTML 中的元素。我知道我必须在打字稿中使用布尔值，在 HTML 中使用 *ngIf。

在我的打字稿中，我有一个布尔值：

showHide: false;

在我的 HTML 中，我有：

<button (click) = "showHide=true" </button>

我用它来隐藏元素。我在要隐藏的元素上使用 *ngIf="showHide" 隐藏我的元素。

但是我怎样才能用同一个按钮恢复我隐藏的元素呢？

【问题讨论】：

【解决方案1】：

您可以使用一个函数将 true 更改为 false，反之亦然，而不是每次单击按钮时都将 showHide 设置为 true。

为此，您需要创建一个函数，例如changeShowStatus 来改变 showHide 的值。

changeShowStatus(){
    this.showHide = !this.showHide;
  }

然后，您每次点击按钮时都会调用此函数，方法是将 showHide=true 更改为 changeShowStatus()：

<button type="button" (click)="changeShowStatus()">show/hide</button>

要设置初始状态，您可以在构造函数中设置 showHide 值并将 showHide 定义为布尔值：

export class App {
  ...
  showHide: boolean;

  constructor() {
    this.showHide = true;
  }
  ...
}

【讨论】：

【解决方案2】：

试试这个

<button (click)="showHide = !showHide">click</button>

【讨论】：