एंगल पुश

पर कोणीय 2 रीफ्रेशिंग व्यू मुझे एक setInterval async ऑपरेशन से बुलाया गया एक array.push फ़ंक्शन पर अद्यतन करने के लिए कोणीय 2 दृश्य नहीं लग रहा है।एंगल पुश

इस प्रकार

क्या मुझे क्या करना कोशिश कर रहा हूँ है::

import {View, Component, bootstrap, Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/angular2' 
 

 
@Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush}) 
 
@View({template: `Number of ticks: {{numberOfTicks}}`}) 
 
class Cmp { 
 
    numberOfTicks = []; 
 
    
 
    constructor(private ref: ChangeDetectorRef) { 
 
    setInterval(() => { 
 
     this.numberOfTicks.push(3); 
 
     this.ref.markForCheck(); 
 
    }, 1000); 
 
    } 
 
} 
 

 
@Component({ 
 
    selector: 'app', 
 
    changeDetection: ChangeDetectionStrategy.OnPush 
 
}) 
 
@View({ 
 
    template: ` 
 
    <cmp><cmp> 
 
    `, 
 
    directives: [Cmp] 
 
}) 
 
class App { 
 
} 
 

 
bootstrap(App);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>angular2 playground</title> 
 
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script> 
 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
 
    <script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script> 
 
    <script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script> 
 
    <script data-require="jasmi[email protected]*" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script> 
 
    
 
    <script src="config.js"></script> 
 
    <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script> 
 
    <script> 
 
    System.import('app') 
 
     .catch(console.error.bind(console)); 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <app></app> 
 
</body> 
 

 
</html>

ऊपर कोड को ठीक से काम करेंगे, तो "numberOfTicks" है

कोड इस angular plunkr example of setInterval से है बस एक संख्या, (जैसा कि प्लंकर मूल उदाहरण दिखाता है) लेकिन एक बार जब मैं इसे एक सरणी में बदलता हूं और डेटा धक्का देता हूं, तो यह अपडेट नहीं होगा।

मुझे समझ में नहीं आ रहा है कि ऐसा क्यों है।

निम्न व्यवहार एक समस्या के समान है जो setInterval/setTimeout का उपयोग करते समय नए डेटा बिंदुओं के साथ angular2 में आलेख को अद्यतन करने का प्रयास करते समय मेरे पास है।

सहायता के लिए धन्यवाद।

स्रोत

2016-03-27 Omer Kushmaro

मैं विस्तृत हूँ मैं इसे ऊपर setInterval methodoligy का उपयोग कर डेटा सरणी है अपडेट करके वास्तविक समय में एक ग्राफ अद्यतन करने के लिए कोशिश कर रहा हूँ, इस plunker कोशिश करते हैं और इस लक्ष्य को हासिल करने के लिए एक अच्छा उदाहरण हो सकता है। सह/संपादित/vdgKVJOymMYhiyqZrPma? पी = पूर्वावलोकन –

आप इसे में एक तत्व को जोड़ने के बाद अपने सरणी के पूरे संदर्भ अद्यतन करने की आवश्यकता:

constructor(private ref: ChangeDetectorRef) { 
    setInterval(() => { 
     this.numberOfTicks.push(3); 
     this.numberOfTicks = this.numberOfTicks.slice(); 
     this.ref.markForCheck(); 
    }, 1000); 
    } 
}

संपादित

DoCheck इंटरफ़ेस भी आपकी रुचि हो सकता है, क्योंकि यह आप अपने खुद के प्लग करने के लिए अनुमति देता है पहचान एल्गोरिदम बदलें।

अधिक जानकारी के लिए इस लिंक देखें:

https://angular.io/docs/ts/latest/api/core/DoCheck-interface.html

यहाँ एक नमूना है:

@Component({ 
    selector: 'custom-check', 
    template: ` 
    <ul> 
     <li *ngFor="#line of logs">{{line}}</li> 
    </ul>` 
}) 
class CustomCheckComponent implements DoCheck { 
    @Input() list: any[]; 
    differ: any; 
    logs = []; 

    constructor(differs: IterableDiffers) { 
    this.differ = differs.find([]).create(null); 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.list); 
    if (changes) { 
     changes.forEachAddedItem(r => this.logs.push('added ' + r.item)); 
     changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item)) 
    } 
    } 
}

स्रोत

2016-03-27 12:11:41

धन्यवाद थियरी, जबकि यह वास्तव में यहां वर्णित मामला हल करता है, मैंने थोड़ा और विस्तार किया होगा। मैं अपनी मान सरणी को अद्यतन करके गतिशील रूप से ग्राफ को अपडेट करने का प्रयास कर रहा हूं, चीजें हैं, अगर मैं सरणी को टुकड़ा करता हूं तो ग्राफ़ पूरी तरह से फिर से खींचा जाएगा। कोणीय 1.x में मैंने $ टाइमआउट/$ अंतराल का उपयोग करके ऐसा किया जो $ लागू होता है और परिवर्तनों का पता लगाने के लिए कोणीय बनाता है। मैं कोणीय 2 –

का उपयोग करके एक ही 'रीयलटाइम' को प्रभावित करने की कोशिश कर रहा हूं, मैं फिर से लिखूंगा - एक ग्राफ में सुझाई गई विधि का उपयोग करके काम करेगा, केवल ग्राफ 'फ़्लैश' होगा बल्कि फिर एक नया बिंदु खींचा जाएगा मौजूदा ग्राफ –

ठीक है मैं समझता हूँ। शायद आप अपने घटक में एक ChangeDetectorRef उदाहरण इंजेक्ट कर सकते हैं और सरणी में तत्व जोड़ने के बाद इसके मार्कफॉर चेक विधि को कॉल कर सकते हैं। –

ऊपर कोड को ठीक से काम करेंगे, तो "numberOfTicks" बस है एक संख्या, लेकिन एक बार जब मैं इसे एक सरणी में बदलता हूं और डेटा धक्का देता हूं, तो यह अपडेट नहीं होगा। मुझे समझ में नहीं आता कि वह क्यों है।

ऐसा इसलिए है क्योंकि एक संख्या जावास्क्रिप्ट आदिम प्रकार है, और एक सरणी एक जावास्क्रिप्ट संदर्भ प्रकार है। जब कोणीय परिवर्तन का पता चलता है, तो यह निर्धारित करने के लिए कि कोई टेम्पलेट बाध्यकारी बदल गया है, यह === का उपयोग करता है।

यदि {{numberOfTicks}} एक आदिम प्रकार है, === वर्तमान और पिछले मानों की तुलना करता है। तो मान 0 और 1 भिन्न हैं।

यदि {{numberOfTicks}} एक संदर्भ प्रकार है, === वर्तमान और पिछले (संदर्भ) मानों की तुलना करता है। तो अगर सरणी संदर्भ नहीं बदला गया, तो कोणीय परिवर्तन का पता नहीं लगाएगा। आपके मामले में, push() का उपयोग करके, सरणी संदर्भ बदल नहीं रहा है।

तो आप के बजाय

<div *ngFor="#tick of numberOfTicks">{{tick}}</div>

तो कोणीय दृश्य को अपडेट होगा क्योंकि वहाँ प्रत्येक सरणी तत्व को एक बाध्यकारी, अपने खाके में निम्नलिखित डाल बल्कि तो बस सरणी ही। तो यदि कोई नया आइटम push() एड है, या कोई मौजूदा आइटम हटा दिया गया है या बदला गया है, तो इन सभी परिवर्तनों का पता लगाया जाएगा।

अपने चार्ट plunker में

तो, अद्यतन करना चाहिए जब from और to सरणियों की सामग्री को बदलने के निम्नलिखित:

<span *ngFor="#item of from">{{item}}</span> 
<span *ngFor="#item of to">{{item}}</span>

खैर, यह करता है, तो प्रत्येक आइटम एक आदिम प्रकार है अद्यतन करेगा। : http: // plnkr -

स्रोत

2016-03-28 19:42:25

यह काम नहीं प्रतीत होता है अब, मुझे "अप्रत्याशित टोकन #" त्रुटि मिली है। –

हालांकि ऐसा लगता है कि कोणीय 2 वास्तव में === का उपयोग नहीं करता है, क्योंकि सरणी कार्यों को दबाकर बस ठीक है। मान लीजिए कि वे ट्रैवर्सिंग सरणी सहित पूर्ण ऑब्जेक्ट तुलना करते हैं। –

एंगल पुश

उत्तर

संबंधित मुद्दे