Açısal 2 Bir öğeyi Göster ve Gizle

Açısal 2'de bir boole değişkenine bağlı olarak bir öğeyi gizleme ve gösterme konusunda sorun yaşıyorum.

div'in göstermesi ve gizlenmesi için kod:

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

değişken "düzenlenir" ve benim bileşenimde saklanır:

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

Öğe gizlenir, saveTodos işlevi başladığında öğe gösterilir, ancak 3 saniye sonra değişken yanlış olarak geri gelse bile öğe gizlenmez. Neden?

* NgIf Direktifini kullanmalısınız

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

Güncelleme: Zaman Aşımı geri araması içindeyken dış kapsama referansı kaçırıyorsunuz.

Bu yüzden yukarıda eklediğim gibi .bind (this) öğesini ekleyin

S: edited, global bir değişkendir. * NgFor-loop içindeki yaklaşımınız ne olurdu? - Blauhirn

C: Yinelediğim nesneye özellik olarak düzenleme eklerdim.

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

Neyi başarmak istediğinize bağlı olarak iki seçenek vardır:

1. Bir öğeyi göstermek veya gizlemek için gizli yönergeyi kullanabilirsiniz

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

2. Elemanı eklemek veya çıkarmak için ngIf kontrol yönergesini kullanabilirsiniz. Bu, gizli yönerge ile farklıdır, çünkü öğeyi göstermez / gizlemez, ancak DOM ekler / kaldırır. Öğenin kaydedilmemiş verilerini kaybedebilirsiniz. İptal edilen bir düzenleme bileşeni için daha iyi bir seçim olabilir.

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

3 saniye sonra değişiklik sorunu için, setTimeout ile uyumsuzluktan kaynaklanabilir. Sayfanıza angular2-polyfills.js kütüphanesini eklediniz mi?

Html Dom-Elementini kaldırmayı umursamadığınızda * ngIf kullanın.

Aksi takdirde şunu kullanın:

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

Alt bileşenin kullandığımı göstermesi için *ngif="selectedState == 1"

Bunun yerine kullandım [hidden]="selectedState!=1"

Benim için işe yaradı .. Alt bileşeni düzgün bir şekilde yüklemek ve alt bileşeni gizlemek ve kaldırmak sonra bu bileşeni kullandıktan sonra tanımsız değildi.

Bu bir direktif için iyi bir kullanım durumudur. Böyle bir şey şaşırtıcı derecede faydalıdır.

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

Bunu aşağıdaki kod snippet'ini kullanarak yapabiliriz.

Açısal Kod:

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

HTML Şablonu:

  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>

İhtiyaçlarınıza *ngIfveya [ngClass]="{hide_element: item.hidden}"CSS sınıfının nerede hide_elementolduğuna bağlı olarak{ display: none; }

*ngIfdurum değişkenlerini değiştiriyorsanız sorunlara neden olabilir *ngIf, bu durumlarda CSS kullanmak display: none;gerekir.

Yukarıdaki @inoabrian çözümü benim için çalıştı. Sayfamı yenileyeceğim ve gizli öğemin sayfamda yeniden görüneceği bir durumla karşılaştım. İşte bunu çözmek için yaptım.

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

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

Sadece setTimeout fonksiyonunuza bind (this) ekleyin ve çalışmaya başlayacaktır.

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

ve HTML değişikliğinde

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

için

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