wake-up-neo.net

Winkel 2 Ein Element anzeigen und ausblenden

Ich habe ein Problem mit dem Verbergen und Anzeigen eines Elements, das von einer booleschen Variablen in Angular 2 abhängt.

dies ist der Code, den das div anzeigen 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 wird "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 saveTodos-Funktion gestartet wird, wird das Element angezeigt. Nach 3 Sekunden wird das Element jedoch nicht ausgeblendet, auch wenn die Variable wieder "false" ist. Warum?

typescriptangular
138
user4956851

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 im Timeout-Callback befinden.

fügen Sie also das .bind (this) hinzu, wie ich es oben hinzugefügt habe

Q: edit ist eine globale Variable. Wie würdest du in einer * ngFor-Schleife vorgehen? - Blauhirn 

A: Ich würde dem Objekt, über das ich iteriere, Bearbeiten 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);
  }
}
143
inoabrian

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

  1. Sie können die hidden Direktive verwenden, um ein Element ein- oder auszublenden

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

  2. Sie können die Steueranweisung ngIf verwenden, um das Element hinzuzufügen oder zu entfernen. Dies unterscheidet sich von der ausgeblendeten Direktive, da das Element nicht angezeigt bzw. ausgeblendet wird, es jedoch aus dem DOM hinzugefügt/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 es an Inkompatibilität mit setTimeout liegen. Haben Sie die Bibliothek angle2-polyfills.js in Ihre Seite aufgenommen?

154
gentiane

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>
26
Dudi

Zur Anzeige der untergeordneten Komponente verwendete ich *ngif="selectedState == 1" 

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

Es funktionierte für mich .. das Laden der untergeordneten Komponente ordnungsgemäß und nachdem die untergeordnete Komponente ein- und ausgeblendet wurde, war sie nach dieser Verwendung nicht undefiniert.

13
Swapnil Kale

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

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

  @Input() removeAfter: number;

  constructor(readonly element: ElementRef) { }

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

Abhängig von Ihren Anforderungen *ngIf oder [ngClass]="{hide_element: item.hidden}", wobei die CSS-Klasse hide_element{ display: none; } ist.

*ngIf kann Probleme verursachen, wenn Sie Statusvariablen ändern. *ngIf wird entfernt. In diesen Fällen ist die Verwendung von CSS display: none; erforderlich.

3
Luke Dupin

Wir können dies tun, indem Sie den folgenden Code-Ausschnitt verwenden.

Winkelcode:

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

HTML-Vorlage:

  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 Lösung oben arbeitete für mich. Ich bin in eine Situation geraten, in der ich meine Seite auffrischen würde und mein verborgenes Element auf meiner Seite wieder angezeigt würde. Hier ist, was ich getan habe, um das Problem zu lösen.

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

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

Fügen Sie einfach bind (this) in Ihre setTimeout-Funktion ein

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>
0
Mukesh Rawat