web-dev-qa-db-ja.com

Angular 2要素を表示する／隠す

Angular 2でブール変数に依存する要素を隠したり表示したりするのに問題があります。

これはdivが表示したり隠したりするコードです。

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

変数は "編集"されており、私のコンポーネントに保存されています。

export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }, 3000);
  }
}

SaveTodos関数が起動すると要素は非表示になりますが、3秒後に変数がfalseに戻っても要素は非表示になりません。どうして？

typescriptangular
146
user4956851

* ngIf指令を使うべきです

<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}

更新：あなたがタイムアウトコールバックの内側にいるとき、あなたは外側のスコープへの参照を逃しています。

だから私は上記のように.bind（これ）を追加

Q：編集済みはグローバル変数です。 * ngFor-loop内でのあなたのアプローチは何ですか？ - ブラウヒルン

A：繰り返しているオブジェクトのプロパティとしてeditを追加します。

<div *ngFor="let obj of listOfObjects" *ngIf="obj.edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{

  public listOfObjects = [
    {
       name : 'obj - 1',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    } 
  ];
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}
147
inoabrian

達成したいことに応じて、2つのオプションがあります。

  1. Hiddenディレクティブを使用して要素を表示または非表示にすることができます

    <div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>

  2. NgIf制御ディレクティブを使用して要素を追加または削除できます。これはhiddenディレクティブとは異なり、要素を表示/非表示にしませんが、DOMに追加/削除します。要素の保存されていないデータを失う可能性があります。キャンセルされた編集コンポーネントにはより良い選択です。

    <div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>

3秒後の変更の問題に関しては、それはsetTimeoutとの非互換性による可能性があります。あなたのページにangular2-polyfills.jsライブラリを含めましたか？

156
gentiane

HTML Dom-Elementを削除しても構わない場合は、* ngIfを使用してください。

そうでなければ、これを使用してください：

<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">
   COUNTER: {{numberOfUnreadAlerts}} 
</div>
27
Dudi

表示する子コンポーネントには、*ngif="selectedState == 1"を使用していました

その代わりに私は[hidden]="selectedState!=1"を使いました

子コンポーネントを適切にロードした後、これを使用した後に子コンポーネントを非表示にしたり非表示にしたりすることが未定義ではなかった。

13
Swapnil Kale

これはディレクティブの良い使用例です。このようなものは驚くほど便利です。

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {

  @Input() removeAfter: number;

  constructor(readonly element: ElementRef) { }

  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}
6
Aluan Haddad

ニーズに応じて、CSSクラス*ngIfが[ngClass]="{hide_element: item.hidden}"であるhide_elementまたは{ display: none; }

*ngIfが削除する状態変数を変更している場合、*ngIfが問題を引き起こす可能性があります。その場合は、CSSを使用するdisplay: none;が必要です。

3
Luke Dupin

以下のコードスニペットを使用してそれを行うことができます。

角度コード：

 export class AppComponent {  
    toggoleShowHide:string ="visible";  
 }

HTMLテンプレート：

  Enter text to hide or show item in bellow: 
  <input type="text" [(ngModel)]="toggoleShowHide">
  <br>
  Toggle Show/hide:
  <div [style.visibility]="toggoleShowHide">   
     Final Release Angular 2!
  </div>
3
Rejwanul Reja

上記の@inoabrianソリューションは私のために働きました。私は自分のページを更新して隠し要素が自分のページに再び現れるという状況に遭遇しました。これを解決するために私がしたことがあります。

export class FooterComponent implements OnInit {
public showJoinTodayBtn: boolean = null;

ngOnInit() {
      if (condition is true) {
        this.showJoinTodayBtn = true;
      } else {
        this.showJoinTodayBtn = false;
      }
}
0
Jason Spence

SetTimeout関数に bind（this） を追加するだけで動作します。

setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);

そしてHTMLの変更で

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

に

<div *ngIf="edited" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>
0
Mukesh Rawat