[解決済み】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>

という変数は "edited" で、私のコンポーネントに格納されています。

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に戻っても要素は非表示になりません。なぜでしょうか？

どうすればいいですか？

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

更新：Timeoutコールバックの内部にいるとき、外部スコープへの参照が欠落しています。

ということで、上記で追加したように .bind(this) を追加します。

Q : editedはグローバル変数です。ngFor-loopの中でどのようなアプローチをとるのでしょうか？- Blauhirn

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