Angular 2 - クリックで表示・非表示

ボタンを使ってHTML内の要素を表示・非表示にしたいと思っています。タイプスクリプトではbooleanを使い、HTMLでは*ngIfを使わなければならないことはわかっています。

私のタイプスクリプトには、ブーリアンがあります。

showHide: false;

私のHTMLでは、次のようになっています。

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

これを使って要素を隠しています。私は隠したい要素に*ngIf="showHide"を使って要素を隠します。

しかし、非表示にした要素を同じボタンで戻すにはどうしたらいいでしょうか？

プログラミング
html angular
21日 4月 2017 в 2:11
まだビューはありません
ソリューション

試しに

click
Tiep Phan
編集した答え 21日 4月 2017 в 2:35
解説 (0)

ボタンをクリックするたびにshowHideをtrueにするのではなく、関数を使ってtrueからfalse、またはその逆に変更することができます。

そのためには、showHideの値を変更するchangeShowStatusのような関数を作成する必要があります。

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

そして、ボタンを押すたびに、showHide=trueをchangeShowStatus()に変更して、この関数を呼び出します。

show/hide

初期状態を設定するには、コンストラクタで showHide 値を設定し、showHide を単にブール値として定義します。

export class App {
  ...
  showHide: boolean;

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

Plunker: show/hide div with TS/Angular2.

Wallace Sidhrée
編集した答え 12日 8月 2017 в 6:28
解説 (0)