मैं XMLHttpRequest का उपयोग करके अपना खुद का अपलोड फ़ाइल घटक बनाता हूं और सब कुछ ठीक काम करता है ... मेरे पास एकमात्र मुद्दा यह है कि मैं एक कॉलबैक विधि बनाता हूं जो अपलोड की प्रगति को अद्यतन करता है ताकि उपयोगकर्ता प्रतिशत देख सके।

अगर मैं प्रोग्रेस का कंसोल.लॉग () करता हूं, तो मैं देख सकता हूं कि यह 0 से 100 तक कैसे बढ़ता है।

लेकिन स्क्रीन इसे प्रतिबिंबित नहीं करती है... मेरे पास उस घटक में यह कार्य है:

ngOnChanges(){
if(this.progress == 100){
  this.progress = 0;
  this.uploading = false;
}
 }

और मेरे पास प्रगति का नवीनतम मूल्य प्राप्त करने का एक तरीका है (जिसे मूल घटक से निकाल दिया गया है)

public updateProgress(progress : number){
    this.progress = progress;
    console.log(this.progress);
    if(this.progress == 100)
      this.uploading = false;
  }

और अगर टेम्पलेट मेरे पास है

    <div *ngIf="uploading" class="uploading">
    <progressbar [max]="100" [value]="progress"><span style="color:white; white-space:nowrap;">{{progress}} / {{100}}</span></progressbar>
</div>

तो प्रगति पट्टी तब भी प्रगति नहीं बढ़ा रही है जब कंसोल में मैं देख सकता हूं कि मूल्य 'प्रगति' बदल रहा है ..

लेकिन लंबे समय के बाद, मुझे पता चलता है कि अगर स्क्रीन के किसी भी हिस्से में माउस के साथ एक क्लिक किया जाता है, तो ngOnChange सक्रिय हो जाता है, और प्रगति बार अपडेट हो जाता है ... प्रगति देखने में सक्षम ...

1
Faabass 6 सितंबर 2017, 16:47

3 जवाब

मुझे लगता है कि आपने OnChanges को लागू करने से चूक गए हैं

import {Component,OnChanges, SimpleChange} from '@angular/core';
  export class yourcomponet implements OnChanges {
   ngOnChanges(changes: {[propKey: string]: SimpleChange})
    {
      // Here goes your logic
   }
}
0
Robert 6 सितंबर 2017, 16:52

चूंकि आपने सभी कोड सूचीबद्ध नहीं किए हैं, इसलिए यह स्पष्ट नहीं है कि आप माता-पिता/बाल घटक कैसे संवाद करते हैं। एक ओर, ऐसा लगता है कि माता-पिता और बच्चे दोनों की प्रगति परिवर्तनशील है। क्यों?

दूसरा सवाल यह है कि आप ngOnChanges का उपयोग क्यों कर रहे हैं?

यदि आपका चाइल्ड कंपोनेंट प्रगति का वर्तमान मूल्य जानता है, तो बच्चे में एक @Output वैरिएबल बनाएं और प्रत्येक प्रगति परिवर्तन पर एक ईवेंट उत्सर्जित करें।

@Output() currentProgres: EventEmitter <number> = new EventEmitter();
...
this.currentProgress.emit(progress);

माता-पिता में, इन घटनाओं को सुनें:

<progressbar [max]="100" (currentProgress)="updateProgress($event)">
...
updateProgress(progress : number){}

माता-पिता के पास UI के लिए एक चर showProgress हो सकता है, इसलिए यह स्वचालित रूप से अपडेट हो जाएगा।

0
Yakov Fain 6 सितंबर 2017, 17:05

उदाहरण से मैं देख सकता हूं कि आपके चाइल्ड कंपोनेंट में आप value नाम की प्रॉपर्टी इनपुट कर रहे हैं लेकिन प्रगति चेक करने की विधि में। सुनिश्चित करें कि आप इसे स्थानीय संपत्ति प्रगति में डाल रहे हैं। ngOnChanges() हर बार किसी भी इनपुट संपत्ति में परिवर्तन होने पर आग लग जाएगी। किसी भी if() कथन से पहले अपने ngOnChanges() में कंसोल.लॉग प्रिंट करने का प्रयास करें और मान की जांच करें

0
JayDeeEss 6 सितंबर 2017, 17:06