मैं एंगुलर 5 में निर्मित एक एप्लिकेशन पर काम कर रहा हूं, जिसे एक मूल मिमी: एसएस काउंटडाउन टाइमर की आवश्यकता है, जो अंततः गतिशील रूप से सेट हो जाएगा। मैंने कई अलग-अलग समाधानों की कोशिश की है, लेकिन सभी एक ही तरह से व्यवहार करते हैं।

मैं इसे चलाने के लिए हार्ड कोडित करना शुरू कर रहा हूं, और एक बुनियादी कार्य जोड़ा है:

time: number = 60;
interval;

startTimer() {
    this.interval = setInterval(() => {
        if (this.time > 0) {
            this.time--;
        } else {
            this.time = 60;
        }
    }, 1000)
}

सामने के अंत में, मैं फ़ंक्शन को एक बटन के साथ कॉल करता हूं:

<button (click)='startTimer()'>Start Timer</button>
<p>{{ time }} seconds remaining....</p>

जब पेज लोड होता है, तो 60 नंबर देखा जा सकता है। लेकिन यह गिनती नहीं है। जब आप बटन दबाते हैं, तो संख्या जो भी सेकंड तक हो, बदल जाती है। तो उदाहरण के लिए यह 60 प्रदर्शित करेगा, इसे 2 सेकंड बाद क्लिक करें और संख्या 58 में बदल जाएगी। तो टाइमर पृष्ठभूमि चला रहा है, लेकिन यूआई में नंबर अपडेट नहीं हो रहा है।

मैं कोणीय के लिए नया हूँ, इसलिए शायद कुछ बुनियादी याद कर रहा हूँ। मैंने अन्य समाधान देखे हैं जिनके लिए एक पाइप या सदस्यता बनाने की आवश्यकता होती है, लेकिन जिन लोगों को मैंने कोशिश की है वे इस तरह से व्यवहार करने लगते हैं। कोई भी संकेतक प्रशंसनीय होंगे!

0
odinel 17 सितंबर 2020, 19:00

3 जवाब

सबसे बढ़िया उत्तर

मैं कहूंगा कि setInterval() विधि के बजाय RxJS का उपयोग करना बेहतर है। RxJS timer फ़ंक्शन और take और map ऑपरेटरों का उपयोग करके निम्नलिखित का प्रयास करें।

नियंत्रक

timer$: Observable<number>;

startTimer(counter: number) {
  this.timer$ = timer(0, 1000).pipe(
    take(counter),
    map(_ => --counter)
  );
}

टेम्पलेट

<input type="number" #timeInput placeholder="Enter time in seconds"/><br>
<button (click)='startTimer(timeInput.value)'>Start Timer</button>

<ng-container *ngIf="(timer$ | async) as timer">
  <p>{{ timer }} seconds remaining....</p>
</ng-container>

कार्य उदाहरण: Stackblitz

अपडेट करें: RxJS का पुराना संस्करण (<=v5)

RxJS फ़ंक्शंस और ऑपरेटरों b/n v5+ और v6+ के आयात और उपयोग में काफी अंतर है। निम्नलिखित RxJS v5 के लिए काम करना चाहिए।

नियंत्रक

import 'rxjs/add/observable/timer';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

timer$: any;

startTimer(counter: number) {
  this.timer$ = Observable.timer(0, 1000).take(counter).map(_ => --counter);
}

टेम्पलेट

<input type="number" #timeInput placeholder="Enter time in seconds"/><br>
<button (click)='startTimer(timeInput.value)'>Start Timer</button>

<ng-container *ngIf="(timer$ | async) as timer">
  <p>{{ timer }} seconds remaining....</p>
</ng-container>
2
Michael D 17 सितंबर 2020, 19:22

RxJs का उपयोग करने का दूसरा तरीका

// imports
import { interval, Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

...
// inside your component
timeout$: Observable<number>;

setCountdown(time = 60) {
  this.timeout$ = interval(1000).pipe(
    take(time),
    map(t => time - t - 1)
  );
}

<button (click)='startTimer()'>Start Timer</button>
<p>{{ timeout$ | async }} seconds remaining....</p>
0
Eduardo Rosostolato 17 सितंबर 2020, 19:12

इस विकल्प को आजमाएं:

startTimer() {
    this.interval = setInterval(() => {
      if (this.time > 0) {
        this.time -= 10;
      } else {
        clearInterval(this.interval);
        this.time = 60;
      }
    }, 1000)
  }
0
Tomasz Vizaint 17 सितंबर 2020, 19:19