typescript - Angular 2 Visa och Dölj ett element

Jag har ett problem med att dölja och visa ett element beroende på en boolean-variabel i Angular 2.

detta är koden för div:en att visa och dölja:

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

variabeln är "edited" och den lagras i min komponent:

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

Elementet är dolt, när saveTodos-funktionen startar visas elementet, men efter 3 sekunder, även om variabeln blir falsk igen, döljs inte elementet. Varför?

Svar #1

Det finns två alternativ beroende på vad du vill uppnå:

Du kan använda den dolda direktiven för att visa eller dölja ett element

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

Du kan använda ngIf-kontrollinstruktionen för att lägga till eller ta bort elementet. Detta är annorlunda än hidden-instruktionen eftersom den inte visar/döljer elementet, utan den lägger till/tar bort det från DOM. Du kan förlora osparad data i elementet. Det kan vara det bättre valet för en redigeringskomponent som avbryts.
```
<div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>
```

För ditt problem med ändring efter 3 sekunder kan det bero på inkompatibilitet med setTimeout. Har du inkluderat angular2-polyfills.js-biblioteket på din sida?

Svar #2

Du bör använda *ngIf-direktivet

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

Uppdatering: du saknar referensen till det yttre omfånget när du är inne i Timeout-callbacken.

så lägg till .bind(this) som jag lade till ovan

Q: edited är en global variabel. Vad skulle vara din metod inom en *ngFor-loop? - Blauhirn
A : Jag skulle lägga till redigera som en egenskap till objektet jag itererar över.

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

Svar #3

När du inte bryr dig om att ta bort Html DOM-elementet, använd *ngIf.

Annars, använd detta:

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

Svar #4

För att barnkomponenten ska visas använde jag *ngIf="selectedState == 1"

Istället för det använde jag [hidden]="selectedState!=1"

Det fungerade för mig.. laddade barnkomponenten korrekt och efter att ha dolt och åter visat barnkomponenten var den inte undefined efter att ha använt detta.

Svar #5

Detta är ett bra användningsfall för en Angular-direktiv. Något som detta är förvånansvärt användbart.

@Directive({
  selector: '[removeAfter]'
})
export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }
 
  /**
   * Removes the attributed element after the specified number of milliseconds.
   */
  @Input() removeAfter: number;

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

Användning :