meaning - angularjs tutorial pdf




कोणीय 2-मॉडल परिवर्तन के बाद अद्यतन नहीं देखें (4)

मेरे पास एक सरल घटक है जो हर कुछ सेकंड में REST एपि को कॉल करता है और कुछ JSON डेटा वापस प्राप्त करता है। मैं अपने लॉग स्टेटमेंट और नेटवर्क ट्रैफ़िक से देख सकता हूं कि JSON डेटा लौटाया जा रहा है, और मेरा मॉडल अपडेट किया जा रहा है, हालांकि, दृश्य नहीं बदल रहा है।

मेरा घटक जैसा दिखता है:

import {Component, OnInit} from 'angular2/core';
import {RecentDetectionService} from '../services/recentdetection.service';
import {RecentDetection} from '../model/recentdetection';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'recent-detections',
    templateUrl: '/app/components/recentdetection.template.html',
    providers: [RecentDetectionService]
})



export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { this.recentDetections = recent;
             console.log(this.recentDetections[0].macAddress) });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

और मेरा विचार इस प्रकार है:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading"><h3>Recently detected</h3></div>
    <div class="panel-body">
        <p>Recently detected devices</p>
    </div>

    <!-- Table -->
    <table class="table" style="table-layout: fixed;  word-wrap: break-word;">
        <thead>
            <tr>
                <th>Id</th>
                <th>Vendor</th>
                <th>Time</th>
                <th>Mac</th>
            </tr>
        </thead>
        <tbody  >
            <tr *ngFor="#detected of recentDetections">
                <td>{{detected.broadcastId}}</td>
                <td>{{detected.vendor}}</td>
                <td>{{detected.timeStamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>{{detected.macAddress}}</td>
            </tr>
        </tbody>
    </table>
</div>

मैं console.log(this.recentDetections[0].macAddress) के परिणामों से देख सकता हूं console.log(this.recentDetections[0].macAddress) कि हाल ही में किए गए ऑब्जेक्ट को अपडेट किया जा रहा है, लेकिन जब तक मैं पृष्ठ को पुनः लोड नहीं करता, तब तक दृश्य में तालिका कभी नहीं बदलती है।

मैं यह देखने के लिए संघर्ष कर रहा हूं कि मैं यहां क्या कर रहा हूं। क्या कोई मदद कर सकता है?


जोन और परिवर्तन का पता लगाने से निपटने के बजाय - AsyncPipe को जटिलता से निपटने दें। इससे अवलोकन योग्य सदस्यता, सदस्यता रद्द (मेमोरी लीक को रोकने के लिए) और कोणीय कंधों पर परिवर्तन का पता लगाया जा सकेगा।

अवलोकन योग्य बनाने के लिए अपनी कक्षा बदलें, जो नए अनुरोधों के परिणामों का उत्सर्जन करेगा:

export class RecentDetectionComponent implements OnInit {

    recentDetections$: Observable<Array<RecentDetection>>;

    constructor(private recentDetectionService: RecentDetectionService) {
    }

    ngOnInit() {
        this.recentDetections$ = Observable.interval(5000)
            .exhaustMap(() => this.recentDetectionService.getJsonFromApi())
            .do(recent => console.log(recent[0].macAddress));
    }
}

और AsyncPipe का उपयोग करने के लिए अपना दृष्टिकोण अपडेट करें:

<tr *ngFor="let detected of recentDetections$ | async">
    ...
</tr>

जोड़ना चाहते हैं, कि एक विधि के साथ एक सेवा करना बेहतर है जो interval तर्क लेगा, और:

  • नए अनुरोध बनाएं (ऊपर दिए गए कोड में exhaustMap का उपयोग करके);
  • अनुरोधों की त्रुटियों को संभालना;
  • ऑफ़लाइन होने पर नए अनुरोध करने से ब्राउज़र को रोकें।

मेरे मामले में, मुझे एक समान समस्या थी। मैं एक फ़ंक्शन के अंदर अपने विचार को अपडेट कर रहा था जिसे एक मूल घटक द्वारा बुलाया जा रहा था, और मेरे मूल घटक में मैं @ViewChild (NameOfMyChieldComponent) का उपयोग करना भूल गया। इस बेवकूफी भरी गलती के लिए मुझे कम से कम 3 घंटे का समय लगा। अर्थात: मुझे उन विधियों में से किसी का उपयोग करने की आवश्यकता नहीं थी :

  • ChangeDetectorRef.detectChanges ()
  • ChangeDetectorRef.markForCheck ()
  • ApplicationRef.tick ()

हो सकता है कि आपकी सेवा में कोड किसी तरह से कोणीय क्षेत्र से बाहर हो जाए। यह परिवर्तन का पता लगाता है। यह काम करना चाहिए:

import {Component, OnInit, NgZone} from 'angular2/core';

export class RecentDetectionComponent implements OnInit {

    recentDetections: Array<RecentDetection>;

    constructor(private zone:NgZone, // <== added
        private recentDetectionService: RecentDetectionService) {
        this.recentDetections = new Array<RecentDetection>();
    }

    getRecentDetections(): void {
        this.recentDetectionService.getJsonFromApi()
            .subscribe(recent => { 
                 this.zone.run(() => { // <== added
                     this.recentDetections = recent;
                     console.log(this.recentDetections[0].macAddress) 
                 });
        });
    }

    ngOnInit() {
        this.getRecentDetections();
        let timer = Observable.timer(2000, 5000);
        timer.subscribe(() => this.getRecentDetections());
    }
}

परिवर्तन का पता लगाने के अन्य तरीकों के लिए , कोणीय में मैन्युअल रूप से परिवर्तन का पता लगाना देखें

परिवर्तन का पता लगाने के वैकल्पिक तरीके हैं

ChangeDetectorRef.detectChanges()

वर्तमान घटक और उसके बच्चों के लिए तुरंत परिवर्तन का पता लगाने के लिए

ChangeDetectorRef.markForCheck()

अगली बार कोणीय रन परिवर्तन का पता लगाने के लिए वर्तमान घटक को शामिल करना

ApplicationRef.tick()

पूरे आवेदन के लिए परिवर्तन का पता लगाने के लिए


@Input() recentDetections: Array<RecentDetection>; उपयोग का प्रयास करें @Input() recentDetections: Array<RecentDetection>;

संपादित करें: @Input() महत्वपूर्ण क्यों है, इसका कारण यह है कि आप मान को टाइपस्क्रिप्ट / जावास्क्रिप्ट फ़ाइल में व्यू (html) में बाँधना चाहते हैं। यदि @Input() डेकोरेटर के साथ घोषित मूल्य बदल गया है, तो दृश्य स्वयं अपडेट हो जाएगा। यदि @Input() या @Output() डेकोरेटर को बदल दिया जाता है, तो एक ngOnChanges -event ट्रिगर हो जाएगा, और दृश्य नए मूल्य के साथ खुद को अपडेट करेगा। आप कह सकते हैं कि @Input() दो-तरफ़ा मान को बांध देगा।

कोणीय द्वारा इस लिंक पर इनपुट के लिए खोज: अधिक जानकारी के लिए glossary

संपादित करें: कोणीय 2 विकास के बारे में अधिक जानने के बाद, मुझे लगा कि एक @Input() वास्तव में समाधान नहीं है, और जैसा कि टिप्पणियों में बताया गया है,

@Input() केवल तब लागू होता है जब डेटा घटक से बाहर डेटा-बाइंडिंग द्वारा परिवर्तित किया जाता है (माता-पिता में बाध्य डेटा परिवर्तित) तब नहीं जब डेटा घटक के भीतर कोड से बदला जाता है।

यदि आपके पास @ गुंटर का जवाब है तो यह समस्या का अधिक सटीक और सही समाधान है। मैं अभी भी इस उत्तर को यहां रखूंगा, लेकिन कृपया गुंटर के उत्तर को सही मानें।





angular