देखने के लिए कोणीय 2 देरी

Question

मैंने अंगुलर 2 का उपयोग करके अपने घटकों के साथ एक अजीब व्यवहार देखा है। मेरे घटक मेरे प्रदाताओं के रूप में मॉडल को बदलने के बाद मेरे विचारों को अद्यतन करने में कुछ सेकंड लगते हैं। भले ही एपीआई का डेटा एक ही डेटा है।

उदाहरण के लिए:

मैं अपने प्रदाता मॉडल UserModel बुलाया मेरी घटक के अंदर मैं एपीआई से डेटा प्राप्त करें और फिर इस मॉडल है जो मेरे विचार के अंदर भी है अद्यतन के रूप में की है। सर्वर से प्रतिक्रिया प्राप्त करने के बाद, मेरे दृश्य को अपडेट करने में अभी भी कुछ सेकंड लगते हैं, और कभी-कभी यह अपडेट नहीं होता है, बस उसी पृष्ठ पर किसी भी टेक्स्ट नियंत्रक पर क्लिक करने के बाद और फिर कोई भी टेक्स्ट फोकस करने के बाद मेरा दृश्य अपडेट किया जाता है।

क्या किसी ने इसे पहले ही देखा है? मुझ से ऐसी कौनसी गलती हो जाएगी ?

कार्ड घटक

public createCard(model:CardModel):Promise<any>{ 
    var context = this; 
    return new Promise((resolve, reject) => { 
    this.stripe.createToken(model) 
     .then(function(token){ 
      model.token = token; 
      context.saveCard("./card", model, true) 
        .then(data => resolve(data)) 
        .catch(error => reject(error)); 
     }) 
     .catch(error => reject(error)); 
}); 

धारी सेवा

public createToken(model:CardModel):Promise<any>{ 
    //I get callback and convert return it as promise 
    return new Promise((resolve, reject) => { 
      //this function is the one from stripe.js, it is not promise 
      this.stripe.card.createToken(model, function(status, response){ 
      if(status == 200){ 
       resolve(response.id); 
      }else{ 
       reject(response.error.message); 
      } 
     }); 
    }); 
} 

इसे वापस करने के लिए वादा करने के लिए आप समारोह createToken कॉलबैक के रूप में देता है, क्योंकि यह एक Strip.js समारोह है नोटिस, और फिर मैं कन्वर्ट हैं बनाने के लिए कार्ड। लेकिन एक बार सभी कार्य पूरा हो जाने पर मेरा क्षेत्र बदल नहीं जाता है। अगर मैं इसे हटा देता हूं .stripe.card.create टोकन और टाइमआउट का उपयोग करके एक सरल संकल्प() वापस लौटाता है, तो यह ठीक काम करता है। तो मेरा मानना ​​है कि यह मुद्दा तब होता है जब एक एसिंक फ़ंक्शन एक वादा के अंदर कॉलबैक लौटाता है। लेकिन मुझे कोई संकेत नहीं है कि इससे कैसे निपटें।

Answer 1

लगता है कि आप एक तृतीय पक्ष लाइब्रेरी का उपयोग कर रहे हैं जो कोणीय 2 के साथ अच्छी तरह से काम नहीं करता है। मुझे स्ट्रिपजेएस के साथ एक ही समस्या थी। मुद्दा कोणीय के Zone.js और जीवनचक्र से संबंधित है - यह बहुत में कोणीय 1. कोणीय कि बुरा पचाने चक्र मुद्दे के समान यहाँ समाधान पर दस्तावेज़ीकरण विस्तृत गया है: https://angular.io/api/core/ChangeDetectorRef#example-live-demo

यह हल करने के लिए, आप अपने को लागू करने के लिए है अपने जीवन चक्र पाश और परिवर्तन की पहचान में अपनी तीसरी पार्टी लाइब्रेरी जोड़ें। StripeJS के लिए मेरे कार्यान्वयन (यह भी clearInterval साथ setInterval नष्ट करने के लिए याद रखें: कुछ कोड है कि Angulars क्षेत्र के बाहर चलाता डेटा अद्यतन करता है जब

import { 
 
    Component, 
 
    Input, 
 
    Output, 
 
    EventEmitter, 
 
    AfterContentInit, 
 
    ChangeDetectorRef, 
 
    ChangeDetectionStrategy, 
 
    ViewContainerRef, 
 
    OnDestroy 
 
} from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'v-payment-form', // <payment-form></payment-form> 
 
    changeDetection: ChangeDetectionStrategy.OnPush, 
 
    templateUrl: './payment-form.component.html' 
 
}) 
 
export class PaymentFormComponent implements AfterContentInit, OnDestroy { 
 
    checker: any; 
 
    constructor(private changeDetectorRef: ChangeDetectorRef) { 
 
    this.checker = setInterval(() => { 
 
     // the following is required, otherwise the view will not be updated 
 
     this.changeDetectorRef.markForCheck(); 
 
    }, 75); 
 
    } 
 
    addPaymentMethod() { 
 
    Stripe.card.createToken(cardDetails) 
 
    this.changeDetectorRef.detectChanges() 
 
    } 
 
    ngAfterContentInit() { 
 
    // ..load stripe js here - I use scriptjs 
 
    } 
 
    ngOnDestroy(): void { 
 
    clearInterval(this.checker) 
 
    } 
 
}