Angular 2 Tampilkan dan Sembunyikan elemen

Saya mengalami masalah menyembunyikan dan menampilkan elemen tergantung dari variabel boolean di Angular 2.

ini kode untuk div untuk ditampilkan dan disembunyikan:

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

variabel "diedit" dan disimpan di komponen saya:

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

Elemen disembunyikan, ketika fungsi saveTodos dimulai, elemen ditampilkan, tetapi setelah 3 detik, bahkan jika variabel kembali menjadi salah, elemen tidak disembunyikan. Mengapa?

Anda harus menggunakan Petunjuk * 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);
  }
}

Pembaruan: Anda kehilangan referensi ke lingkup luar saat Anda berada di dalam callback Timeout.

jadi tambahkan .bind (ini) seperti saya tambahkan di atas

T: diedit adalah variabel global. Apa yang akan menjadi pendekatan Anda dalam * ngFor-loop? - Blauhirn

A: Saya akan menambahkan edit sebagai properti ke objek yang saya iterasi.

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

Ada dua opsi tergantung apa yang ingin Anda capai:

1. Anda dapat menggunakan arahan tersembunyi untuk menampilkan atau menyembunyikan elemen

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

2. Anda dapat menggunakan arahan kontrol ngIf untuk menambah atau menghapus elemen. Ini berbeda dengan arahan tersembunyi karena tidak menampilkan / menyembunyikan elemen, tetapi menambah / menghapus dari DOM. Anda bisa kehilangan data elemen yang belum disimpan. Ini bisa menjadi pilihan yang lebih baik untuk komponen edit yang dibatalkan.

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

Bagi Anda masalah perubahan setelah 3 detik, itu bisa jadi karena ketidakcocokan dengan setTimeout. Apakah Anda memasukkan perpustakaan angular2-polyfills.js di halaman Anda?

Ketika Anda tidak peduli tentang menghapus Html Dom-Element, gunakan * ngIf.

Kalau tidak, gunakan ini:

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

Untuk komponen anak untuk menunjukkan saya gunakan *ngif="selectedState == 1"

Alih-alih itu saya gunakan [hidden]="selectedState!=1"

Ini bekerja untuk saya .. memuat komponen anak dengan benar dan setelah hide dan un-hide komponen anak tidak terdefinisi setelah menggunakan ini.

Ini adalah kasus penggunaan yang baik untuk arahan. Sesuatu seperti ini sangat berguna.

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }

  /**
   * Removes the attributed element after the specified number of milliseconds. 
   * Defaults to (1000)
   */
  @Input() removeAfter = 1000;


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

Kita dapat melakukannya dengan menggunakan cuplikan kode di bawah ini ..

Kode Sudut:

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

Templat HTML:

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

Tergantung pada kebutuhan Anda, *ngIfatau [ngClass]="{hide_element: item.hidden}"di mana kelas CSS hide_elementadalah{ display: none; }

*ngIfdapat menyebabkan masalah jika Anda mengubah variabel status *ngIfdihapus, dalam kasus display: none;itu diperlukan CSS .

Solusi @inoabrian di atas berhasil untuk saya. Saya mengalami situasi di mana saya akan menyegarkan halaman saya dan elemen tersembunyi saya akan muncul kembali di halaman saya. Inilah yang saya lakukan untuk mengatasinya.

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

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

Cukup tambahkan bind (ini) di fungsi setTimeout Anda, itu akan mulai berfungsi

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

dan dalam perubahan 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>

Untuk

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