Winkel 2 Ein Element ein- und ausblenden

Ich habe ein Problem beim Ausblenden und Anzeigen eines Elements in Abhängigkeit von einer booleschen Variablen in Angular 2.

Dies ist der Code, den das Div ein- und ausblenden soll:

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

Die Variable ist "bearbeitet" und in meiner Komponente gespeichert:

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

Das Element wird ausgeblendet. Wenn die Funktion saveTodos gestartet wird, wird das Element angezeigt. Nach 3 Sekunden wird das Element jedoch nicht ausgeblendet, selbst wenn die Variable wieder falsch ist. Warum?

Sie sollten die * ngIf-Direktive verwenden

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

Update: Sie vermissen den Verweis auf den äußeren Bereich, wenn Sie sich innerhalb des Timeout-Rückrufs befinden.

Fügen Sie also die .bind (dies) hinzu, wie ich oben hinzugefügt habe

F: Bearbeitet ist eine globale Variable. Was wäre Ihr Ansatz innerhalb einer * ngFor-Schleife? - Blauhirn

A: Ich würde dem Objekt, über das ich iteriere, edit als Eigenschaft hinzufügen.

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

Es gibt zwei Möglichkeiten, je nachdem, was Sie erreichen möchten:

1. Mit der Anweisung hidden können Sie ein Element ein- oder ausblenden

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

2. Mit der Steueranweisung ngIf können Sie das Element hinzufügen oder entfernen. Dies unterscheidet sich von der versteckten Direktive, da das Element nicht angezeigt / ausgeblendet wird, sondern dem DOM hinzugefügt / daraus entfernt wird. Sie können nicht gespeicherte Daten des Elements verlieren. Dies kann die bessere Wahl für eine Bearbeitungskomponente sein, die abgebrochen wird.

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

Bei einem Änderungsproblem nach 3 Sekunden kann dies auf eine Inkompatibilität mit setTimeout zurückzuführen sein. Haben Sie die Bibliothek angular2-polyfills.js in Ihre Seite aufgenommen?

Wenn Sie das HTML-Dom-Element nicht entfernen möchten, verwenden Sie * ngIf.

Andernfalls verwenden Sie Folgendes:

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

Damit die untergeordnete Komponente zeigt, dass ich sie verwendet habe *ngif="selectedState == 1"

Stattdessen habe ich verwendet [hidden]="selectedState!=1"

Es hat bei mir funktioniert. Das Laden der untergeordneten Komponente ordnungsgemäß und nach dem Ein- und Ausblenden der untergeordneten Komponente war nach dieser Verwendung nicht undefiniert.

Dies ist ein guter Anwendungsfall für eine Richtlinie. So etwas ist überraschend nützlich.

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

Wir können dies mit dem folgenden Code-Snippet tun.

Winkelcode:

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

HTML-Vorlage:

  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>

Je nach Bedarf, *ngIfoder [ngClass]="{hide_element: item.hidden}"wo CSS - Klasse hide_elementist{ display: none; }

*ngIfkann Probleme verursachen, wenn Sie Statusvariablen *ngIfentfernen. In diesen Fällen ist die Verwendung von CSS display: none;erforderlich.

@inoabrian Lösung oben hat bei mir funktioniert. Ich stieß auf eine Situation, in der ich meine Seite aktualisierte und mein verstecktes Element auf meiner Seite wieder auftauchte. Folgendes habe ich getan, um das Problem zu beheben.

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

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

Fügen Sie einfach bind (this) in Ihre setTimeout-Funktion ein, damit es funktioniert

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

und in HTML ändern

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

Zu

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