2015-06-04 36 views
7

में मॉडल को बदलने के बाद दृश्य को कैसे अपडेट करें I Angular को मॉडल में किए गए परिवर्तनों को प्रचारित करने दें। AngularJS में यह वास्तव में आसान होगा, लेकिन मुझे यह कोणीय में काम नहीं कर रहा है। मैं पूरी परिवर्तन पहचान प्रणाली जानता हूं और प्रचार पूरी तरह से बदल गया है। किसी भी तरह, मुझे परिवर्तनों के कोणीय को सूचित करने की आवश्यकता है। लेकिन मैं अभ्यास में यह कैसे कर सकता हूं।कोणीय

टाइपप्रति कोड के इस टुकड़े देखें:

import {Component, View, bootstrap, For} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <div *for="#user of users"> 
     {{user}} 
    </div> 
    `, 
    directives: [For] 
}) 
class App { 
    users:Array<String>; 

    constructor() { 
     this.users = []; 
     this.fillUsersAsync(); 
    } 

    fillUsersAsync(){ 
     window['fetch']('http://jsonplaceholder.typicode.com/users') 
      .then(resp => resp.json()) 
      .then(users => users.forEach(user => this.users.push(user.name))) 
      .then(() => console.log('Retrieved users and put on the model: ', this.users)); 
    } 
} 

bootstrap(App); 

आपको लगता है कि देखेंगे, के बाद उन मॉडल में लोड करने के लिए, दृश्य को अपडेट नहीं करता है।

मैं systemjs 0.16, कोणीय 2.0.0-alpha.23 का उपयोग कर रहा हूं।

See this plnkr for the example (वर्तमान में, केवल क्रोम में काम करता है के रूप में नए 'लाने' एपीआई प्रयोग किया जाता है)

उत्तर

2

मैं इस मुद्दे पाया। जाहिर है, यह एक बग अल्फा 27 में तय किया जाना चाहिए। इस बग रिपोर्ट को देखें: https://github.com/angular/angular/issues/1913

कोणीय 2 पाइजेज का उपयोग करता है यह जानने के लिए कि पाचन चक्र कब शुरू करें (गंदे जांच और दृश्य को अपडेट करें)। अभी तक, नई विंडो के साथ डेटा लाने के बाद जोनज ट्रिगर नहीं किया गया है। फ़ेच()।

खिड़की की जगह [ 'लाने'] यह करने के लिए लाइन मुद्दा मेरे लिए तय: Zone.bindPromiseFn(window['fetch'])('http://jsonplaceholder.typicode.com/users')

1

AngularJS2 में दृश्य पर डेटा अपडेट करने के लिए आप फार्म उपयोग करना चाहिए। आप इस page पर इसके बारे में पढ़ सकते हैं या अधिक जानकारी here देख सकते हैं। अगर मैं फार्म सही ढंग से समझ, तो आप इस तरह yout @View हिस्से को संशोधित करना चाहिए:

@View({ 
    template: ` 
    <div *for="#user of users" control="users"> 
     {{user}} 
    </div> 
    `, 
    directives: [For] 
}) 

--edited

इस प्रयास करें:

import {Component, View, bootstrap, For} from 'angular2/angular2'; 

// Annotation section 
@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <div [control]="users" *for="#user of users"> 
     {{user.value}} 
    </div> 
    `, 
    directives: [For, forms] 
}) 
class App { 
    users:Array<String>; 

    constructor() { 
     this.users = new Control([]); 
     this.fillUsersAsync(); 
    } 

    fillUsersAsync(){ 
     window['fetch']('http://jsonplaceholder.typicode.com/users') 
      .then(resp => resp.json()) 
      .then(users => 
       var usersArr = [] 
       users.forEach(user => 
         usersArr.push(user.name)) 
       this.users = new Control(usersArr)); 
     } 
} 

bootstrap(App); 

मुझे लगता है कि यकीन नहीं है मेरा जवाब पूरी तरह से सही है, लेकिन मुझे और जानकारी नहीं मिल रही है। इस कोड के साथ प्रयोग और बल आपके साथ हो सकता है! :)

इसके अलावा मुझे this link, बहुत जानकारीपूर्ण मिला।

के रूप में मैं समझता हूँ, जब निर्माता में आप new Control(some data) के माध्यम से आप users चर को प्रारंभ करना चाहिए और उसके बाद, दृश्य टेम्पलेट में आप इस तरह इस डेटा का उपयोग कर सकते हैं - {{users.value}}

यदि यह काम नहीं करता है: इसे आज़माएं लेकिन बहुत सरल डेटा के साथ, उदाहरण के लिए एक सरणी के बजाय स्ट्रिंग का उपयोग करें।

और this video एनजी 2 में फॉर्मों को रद्द करने में मदद करेगा।

+0

आपका दूसरा लिंक मुझे सही रास्ते पर रखना प्रतीत होता है, लेकिन दस्तावेज़ आउट-डेट होने लगता है। मुझे लगता है कि मुझे निर्देश सरणी में किसी प्रकार का फॉर्म निर्देश चाहिए, लेकिन नाम क्या है, और इसे कैसे आयात करें? – nicojs

+0

@ एनिकोज पहले लिंक के उदाहरण के रूप में करने की सलाह देंगे और यदि यह काम नहीं करता है, तो दूसरे की तरह करें। 'रूपों' के लिए निर्देश का नाम - निर्देश: [रूप] या शायद [फॉर्म]। इसे आयात करें [निर्देश] के लिए आयात करें। इसे आज़माएं और कृपया रिपोर्ट करें, मैं आपकी मदद करने की कोशिश करता हूं। –

+0

मैंने यह सब कोशिश की, लेकिन यह काम नहीं कर रहा है। मुझे लगता है कि हम गलत दिशा में देख रहे हैं। जहां तक ​​मुझे पता है, कोणीय 2 अभी भी गंदे जांच का उपयोग करता है यह देखने के लिए कि मॉडल बदल गया है या नहीं। किसी भी तरह मुझे angular2 को सूचित करने की आवश्यकता है कि मैंने मॉडल को अपडेट किया है। या एक $ http समकक्ष का उपयोग करें। – nicojs

-2

एनजी-उपसर्ग वापस आ गए हैं। For अब कोणीय 2 संस्करण अल्फा -24 + के लिए ngFor बन गया है।

import {NgFor} from 'angular2/directives'; 
@View({ 
    directives: [ngFor] 
}) 

फिर टेम्पलेट में *ng-for=#user of users" का उपयोग करें।

चेकआउट ngFor docs या a working example

+0

समस्या के लिए नहीं है, यह सही ढंग से काम कर रहा है। यही कारण है कि मैंने निर्दिष्ट किया कि मैं अल्फा -22 का उपयोग कर रहा हूं। लेकिन उस समय angular2 दृश्य का मूल्यांकन कर रहा है, उपयोगकर्ता सरणी अभी भी खाली है। समस्या यह है कि fetular के बाद मॉडल में परिवर्तनों के बारे में angular2 सूचित नहीं है। जहां तक ​​मुझे पता है, कोणीय 2 Object.observe का उपयोग नहीं कर रहा है, लेकिन फिर भी परिवर्तनों की जांच के लिए गंदा जांच का उपयोग करता है। तो यह दृश्य में बदलावों के बारे में नहीं जानता है। कोणीय 1.x में आप $ http का उपयोग करेंगे, या यहां तक ​​कि $ लागू भी होंगे। क्या एक कोणीय 2 बराबर है? – nicojs

+0

अल्फा-कोड के साथ आप अधिक बग और अपूर्ण सुविधाओं से बचने के लिए नवीनतम संस्करण में चिपकने पर विचार करना चाहेंगे। अंगुलर 2 में कोई $ आवेदन नहीं है, न ही यह आवश्यक है, दृश्य को मॉडल के आधार पर अपडेट करना चाहिए। $ http के बजाय, आप ng2 में किसी भी अनुरोध विधि का उपयोग कर सकते हैं। एंगुलर के निर्माता से [यह प्रतिक्रिया] देखें (http://stackoverflow.com/questions/28910864/angular-2-how-to-use-import-the-http-module)। – shmck

+0

ठीक है, कोई भी $ लागू लागू नहीं है। लेकिन मेरे परिवर्तनों के परिवर्तन का पता लगाने के लिए कुछ रास्ता होना चाहिए। यह इसके लिए मतदान नहीं करेगा, न ही यह Object.observe का उपयोग कर रहा है। तो मैं यह कैसे ठीक करूं? – nicojs