Wie ein Lader für 3 Sekunden ein- und ausblenden in Winkel 2

Question

I für 5 Sekunden eine Lade zeigen wollen und ausblenden, wenn ich auf einen Knopf klicken, habe ich versucht, bisher

<div *ngIf='showloader' class="form-group loaderformgroup maindivdisplaynone" id="waitresponce" > 
    <div class="waitresponce"> 
     <img src="assets/img/loader.gif" img-from="assets" alt="loader" class="waitresponceloader"/> 
    </div> 
</div> 


resetform() { 
     this.student = {}; 
      Observable.timer(500).subscribe(() => { 
         $('#tablebody').addClass('fadding'); 
         this.showloader = true; 
         Observable.timer(500).subscribe(() => 
         $('#tablebody').removeClass('fadding'); 
         this.showloader = false 
         ); 
         }); 
    } 

meine ts,

 setInterval(() => { 
    this.showloader = true; 
}, 2000); 

Aber es zeigt loader nach 2000.Kann jemand bitte help.Thanks.

Answer 1

setTimeout Verwendung ist nicht ratsam, mit Winkel 2. Sie Observable und timer dafür verwenden können:

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/timer'; 

@Component({ 
    selector : 'my-component' 
}) 
export class MyComponent implements OnInit, OnDestroy { 
    public showloader: boolean = false;  
    private subscription: Subscription; 
    private timer: Observable<any>; 

    public ngOnInit() { 
    // call this setTimer method when you want to set timer 
    this.setTimer(); 
    } 
    public ngOnDestroy() { 
    if (this.subscription && this.subscription instanceof Subscription) { 
     this.subscription.unsubscribe(); 
    } 
    } 

    public setTimer(){ 

    // set showloader to true to show loading div on view 
    this.showloader = true; 

    this.timer  = Observable.timer(5000); // 5000 millisecond means 5 seconds 
    this.subscription = this.timer.subscribe(() => { 
     // set showloader to false to hide loading div from view after 5 seconds 
     this.showloader = false; 
    }); 
    } 

} 

Answer 2

2000 ist 2 Sek. versuch 5000 und statt setInterval setTimeout verwenden, wird es nur einmal passieren

Answer 3

Wenn Sie den Lader für 5 Sek. anzeigen und ausblenden möchten, sollten Sie die Bedingung in ng-if zu false in setTimeout setzen. Im Moment tun Sie den anderen Weg, d. H. Setzen Sie nach 2 Sekunden auf true. Deshalb zeigt es sich nach 2 Sekunden.