Question

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

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

showHide: false;

在我的HTML中我有：

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

我用它来隐藏元素。我使用* ngIf =＆＃34; showHide＆＃34;隐藏我的元素。在我想隐藏的元素上。

但是如何用相同的按钮带回我隐藏的元素？

Answer 1

试试这个

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

Answer 2

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

为此，您需要创建一个功能，例如 changeShowStatus 更改 showHide 的值。

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

然后在每次按下按钮时调用此函数，方法是将showHide = true更改为changeShowStatus（）：

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

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

export class App {
  ...
  showHide: boolean;

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