角度2 - 单击以显示和隐藏

Question

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

在我的打字稿中,我有一个布尔值:

showHide: false;

在我的HTML中我有:

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

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

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

Answer 1

试试这个

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

Answer 2

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

要做到这一点,你需要创建一个函数如changeShowStatus改变的值显示隐藏.

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;
  }
  ...
}