कोणीय 2, settimeout

में परिवर्तनीय परिवर्तनों के बाद अद्यतन नहीं करना देखें, मैं एक प्रयोग के रूप में अपना पहला कोणीय 2 एप्लिकेशन सेट करने की कोशिश कर रहा हूं और नवीनतम बीटा रिलीज का उपयोग कर रहा हूं।कोणीय 2, settimeout

मुझे एक अजीब समस्या का सामना करना पड़ रहा है जहां मैं अपने व्यू में उपयोग कर रहे चर को टाइमआउट सेट करने के बाद अद्यतन नहीं किया जा रहा है।

@Component({ 
    selector: "my-app", 
    bindings: [] 
}) 

@View({ 
    templateUrl: "templates/main.component.html", 
    styleUrls: ['styles/out/components/main.component.css'] 
}) 

export class MainComponent { 

    public test2 = "initial text"; 

    constructor() { 
     setTimeout(() => { 
      this.test2 = "updated text"; 
     }, 500); 

    } 
}

आप मैं एक चर नामित test2 है और निर्माता में मैं 500 एमएस के एक समाप्ति सेट मैं कहाँ मूल्य को अद्यतन करने कर रहा हूँ "पाठ अद्यतन" करने के लिए देख सकते हैं।

तो मेरे विचार main.component.html में मैं बस का उपयोग करें:

{{ test2 }}

लेकिन मूल्य कभी नहीं "अद्यतन पाठ" पर सेट हो जाएगा और "प्रारंभिक पाठ" पर रहता है हमेशा के लिए भले ही अद्यतन हिस्सा है मार खाना। अगर मैं कोणीय 2 ट्यूटोरियल का पालन करता हूं तो वे वास्तव में मुझे इस समाधान का उत्तर नहीं देते हैं। यह सोच रहा था कि क्या किसी को यह पता चल जाएगा कि मैं यहां क्या खो रहा हूं।

संपादित करें: मेरा पूरा कोड मैं बूटस्ट्रैप और एचटीएमएल आदि सहित उपयोग कर रहा हूँ बूटस्ट्रैप साथ

<html> 
<head> 
    <title>Angular 2</title> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/node_modules/reflect-metadata/reflect.js"></script> 
    <script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 

    <script src="/node_modules/q/q.js"></script> 
    <script src="/node_modules/jquery/dist/jquery.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <script src="/bower_components/breeze-client/breeze.debug.js"></script> 
    <script src="/bower_components/datajs/datajs.js"></script> 
    <script src="/bower_components/bootstrap-less/js/collapse.js"></script> 
    <script src="/bower_components/bootstrap-less/js/modal.js"></script> 

    <script src="/bower_components/signalr/jquery.signalR.js"></script> 
    <script src="http://localhost:64371/signalr/js"></script> 

    <link href="styles/out/main.css" type="text/css" rel="stylesheet" /> 
    <script> 
     System.config({ 
      map: { 
       rxjs: '/node_modules/rxjs' // added this map section 
      }, 
      packages: {'scripts/out': {defaultExtension: 'js'}, 'rxjs': {defaultExtension: 'js'}} 
     }); 

     System.import('scripts/out/main'); 

    </script> 
</head> 
<body> 
    <my-app>loading...</my-app> 
</body> 
</html>

main.ts:

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 
import {COMMON_DIRECTIVES} from './constants'; 
import {MainComponent} from './components/main.component' 
bootstrap(MainComponent);

मुख्य-component.html

{{ test2 }}

स्रोत

2015-12-28 Jurgen Welschen

मैंने अभी आपके न्यूनतम कोणीय 2 ऐप का पुनर्निर्माण किया है, लेकिन मुझे अपडेट किए गए टेक्स्ट परिणाम मिलते हैं। क्या कंसोल में कोई त्रुटि है? यदि नहीं, तो क्या आप अधिक कोड दे सकते हैं? आपके 'index.html',' main.component.html' और जहां आप ऐप – PierreDuc

बूटस्ट्रैप को बूट करते हैं, यह मेरे लिए हल किया गया है http://stackoverflow.com/a/41724333/1197775 – juanpastas

के रूप में Vlado ने कहा, यह काम करना चाहिए ;-)

मुझे लगता है कि angular2-polyfills.js पुस्तकालय अपने पेज में शामिल किया जाना चाहिए। मैं इसे नहीं देख सकता यह फ़ाइल अनिवार्य रूप से zone.js और प्रतिबिंबित-मेटाडेटा का मैशप है। जोन अपडेट की पहचान का हिस्सा लेते हैं।

आप इस वीडियो को देख सकते हैं जहां ब्रायन फोर्ड बताता है कि यह क्या है: https://www.youtube.com/watch?v=3IqtmUscE_U।

आशा है कि यह आप में मदद करता है, थियरी

स्रोत

2015-12-28 11:04:27

अच्छी तरह से देखा गया। यह सबसे अधिक संभावना है – PierreDuc

खुशी है कि आप मेरे सुझाव की पुष्टि करते हैं, पियरे! ;-) –

वह था! लेकिन मैं समझ में नहीं आता। मैं अल्फा के साथ कुछ संस्करणों के साथ विकसित होता था और यह बॉक्स से बाहर काम करेगा। वे डिफ़ॉल्ट रूप से angular2 पैकेज में इसे शामिल नहीं करते हैं? –

यह काम करना चाहिए। क्या आपके पास कंसोल में कोई अन्य त्रुटियां हैं? इस Plunker पर

@Component({ 
selector: 'my-app', 
template: `<h1>Hello {{title}}</h1>` 
}) 
export class App { 
public title: string = "World"; 
constructor() { 
    setTimeout(() => { 
    this.title = "Brave New World" 
    }, 1000);) 
} 
}

देखो: http://plnkr.co/edit/XaL4GoqFd9aisOYIhuXq?p=preview

स्रोत

2015-12-28 10:59:07

धन्यवाद, कंसोल में कोई त्रुटि नहीं। मैंने अपने प्रश्न को पूर्ण कोड से अपडेट किया है, मुझे लगता है कि आप आयात 'आरएक्सजेएस/आरएक्स' का उपयोग कर रहे हैं; और मैं नहीं हूँ। मैं इसे ट्यूटोरियल में नहीं देख सका। क्या ऐसा कोई कारण है जिससे आप ऐसा करते हैं? –

नहीं, आपको इसकी आवश्यकता नहीं है, मैंने अपने अन्य प्लंकर को फोर्क किया है और यह छोड़ा गया है ... :(जैसा कि थियरी ने कहा था, बस अपने index.html –

में कोणीय 2-polyfills.min.js शामिल करें यह पूरी तरह से कोणीय के साथ मेरे लिए काम करता है 2.0, धन्यवाद। –

मैं ओपी जहां बाध्य गुण के लिए एक बुनियादी Angular2 सेटअप परिवर्तन में भी दृश्य द्वारा स्वचालित रूप से दिखाई नहीं होगा काफ़ी मिलती-जुलती समस्या थी। इस समय हम Angular2 2.0.0-rc.6 का उपयोग कर रहे हैं। कोई त्रुटि संदेश नहीं था।

अंत में मैं दोषी पाया ES6-promise.js है, जो 'आवश्यक' था एक तीसरी पार्टी घटक उपयोग हम द्वारा एक संदर्भ किया जाना है। किसी भी तरह से कोर-जेएस संदर्भ में हस्तक्षेप किया गया है जिसका हम उपयोग कर रहे हैं जिसमें कुछ कोणीय 2 ट्यूटोरियल में आरसी 6 के साथ सुझाव दिया गया है।

जैसे ही मैंने ES6-promise.js संदर्भ से छुटकारा मिला, दृश्य सही ढंग से मेरी घटक पर एक संपत्ति को बदलने के बाद (वादा या समय समाप्ति के माध्यम से) अपडेट किया गया।

आशा यह कुछ दिन किसी को मदद मिलती है।

स्रोत

2016-09-09 08:43:53 Ben

धन्यवाद, मुझे एक दिन बचाया –

अंगुलर 2 (~ 2.1.2) में इसे काम करने का एक और तरीका ChangeDetectorRef क्लास के माध्यम से है। मूल प्रश्न कोड इस तरह दिखेगा:

import { 
    ChangeDetectorRef 
    // ... other imports here 
} from '@angular/core'; 

@Component({ 
    selector: "my-app", 
    bindings: [] 
}) 

@View({ 
    templateUrl: "templates/main.component.html", 
    styleUrls: ['styles/out/components/main.component.css'] 
}) 

export class MainComponent { 

    public test2 = "initial text"; 

    constructor(private cd: ChangeDetectorRef) { 
     setTimeout(() => { 
      this.test2 = "updated text"; 

      // as stated by the angular team: the following is required, otherwise the view will not be updated 
      this.cd.markForCheck(); 

     }, 500); 
    } 
}

स्रोत

2017-01-30 17:39:26 artemisian

कोणीय 2, settimeout

उत्तर

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