चुनिंदा टैग पर ngModel में परिवर्तन का पता लगाएं (कोणीय 2)

Question

मैं ngModelएक <select>टैग में परिवर्तन का पता लगाने का प्रयास कर रहा हूं । कोणीय 1.x में, हम इसे एक $watchऑन के साथ ngModelया उपयोग करके हल कर सकते हैं ngChange, लेकिन मुझे यह समझना अभी बाकी है कि ngModelकोणीय 2 में बदलाव का पता कैसे लगाया जाए ।

पूर्ण उदाहरण : http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info

import {Component, View, Input, } from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'my-dropdown'
})
@View({
    directives: [FORM_DIRECTIVES],
    template: `
        <select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" >
            <option *ngFor="#option of options">{{option}}</option>
        </select>
        {{selection}}
    `
})
export class MyDropdown {
    @Input() options;

    selection = 'Dog';

    ngOnInit() {
        console.log('These were the options passed in: ' + this.options);
  }

  onChange(event) {
    if (this.selection === event) return;
    this.selection = event;
    console.log(this.selection);
  }

}

जैसा कि हम देख सकते हैं, यदि हम ड्रॉपडाउन, हमारे ngModelपरिवर्तनों और दृश्य में प्रक्षेपित अभिव्यक्ति से भिन्न मूल्य का चयन करते हैं, तो यह प्रतिबिंबित होता है।

मुझे अपनी कक्षा / नियंत्रक में इस बदलाव के बारे में कैसे सूचित किया जाए?

Comments

आप कुछ अतिरिक्त टिप्पणियों को जांच में रखना चाह सकते हैं; आप नहीं चाहते कि यह सवाल भेष में एक झंडे के रूप में फहराया जाए। stackoverflow.com/help/dont-ask ।

— दावा

Answer 1

अपडेट करें :

इवेंट और प्रॉपर्टी बाइंडिंग को अलग करें:

<select [ngModel]="selectedItem" (ngModelChange)="onChange($event)">

onChange(newValue) {
    console.log(newValue);
    this.selectedItem = newValue;  // don't forget to update the model here
    // ... do other stuff here ...
}

आप भी इस्तेमाल कर सकते हैं

<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">

और फिर आपको इवेंट हैंडलर में मॉडल को अपडेट नहीं करना होगा, लेकिन मेरा मानना ​​है कि इससे दो घटनाओं में आग लग जाती है, इसलिए यह शायद कम कुशल है।

---

पुराना उत्तर, इससे पहले कि वे बीटा में एक बग तय करते हैं।

एक स्थानीय टेम्प्लेट चर बनाएं और एक (change)घटना संलग्न करें :

<select [(ngModel)]="selectedItem" #item (change)="onChange(item.value)">

plunker

यह भी देखें कि मुझे कोणीय 2 में "चयन" में नया चयन कैसे मिल सकता है?

Comments

तो क्या हुआ ngModelअगर मैं सिर्फ एक नया चर कह रहा हूँ item? ngModelघटना श्रोताओं को प्राप्त करने के लिए कोष्ठक में लपेटने की बात नहीं है, तो हम एक नया चर क्यों पेश कर रहे हैं?

— लक्स

@ लक्स, हाँ अच्छा सवाल है। selectedItemहमारा बाध्य डेटा है, जो NgModel हमारे लिए स्वचालित रूप से अपडेट होता है, लेकिन ... यह हमें बदलावों की सूचना नहीं देता है, जो अक्सर पर्याप्त होता है (विचार और ऐसे अपडेट होंगे), लेकिन जाहिर है कि यह आपके उपयोग के मामले के लिए पर्याप्त नहीं है। मेरे द्वारा संदर्भित अन्य SO प्रश्न में, मैं वर्णन करता हूं कि कैसे मैंने (ngModelChange)बदलावों को अधिसूचित करने के लिए उपयोग करने की कोशिश की , लेकिन प्रत्येक परिवर्तन के लिए इसे दो बार कहा जाता है। मुझे नहीं पता कि यह बग है या नहीं। वैसे भी, (change)ईवेंट बाइंडिंग जोड़ना समस्या को हल करने के लिए लगता है।

— मार्क राजकोक

इसके अलावा, मैंने प्लंकर को अपडेट किया जो दिखाता है कि आग लगने पर selectedItemअद्यतन नहीं किया जाता onChange()है, इसलिए ऐसा लगता है कि हमें उस स्थानीय टेम्पलेट चर की आवश्यकता है।

— मार्क राजकोक

@ #या #itemहमारे मामले में एक स्थानीय संदर्भ है। इसलिए हम item.changeवहां करने में सक्षम हैं ।

— मार्क पिज़्ज़ाक - ट्रिलोन।

@ लक्स, मैंने पहले से ही हुक करने का तरीका वर्णित किया है: ngModelChangeकस्टम इवेंट में बाँध । समस्या यह है कि, <select>यह घटना हर परिवर्तन के लिए दो बार फायर करती है।

— मार्क राजकोक

Answer 2

मैं इस सवाल पर लड़खड़ा गया हूं और मैं अपना जवाब प्रस्तुत करूंगा जो मैंने इस्तेमाल किया और बहुत अच्छा काम किया। मेरे पास एक खोज बॉक्स था जो फ़िल्टर और ऑब्जेक्ट की सरणी और मेरे खोज बॉक्स पर मैंने उपयोग किया था(ngModelChange)="onChange($event)"

मेरे में .html

<input type="text" [(ngModel)]="searchText" (ngModelChange)="reSearch(newValue)" placeholder="Search">

तो मेरे में component.ts

reSearch(newValue: string) {
    //this.searchText would equal the new value
    //handle my filtering with the new value
}

Comments

बस FYI करते समय ngModelChange, $eventएक DOM इवेंट नहीं है । बल्कि यह फार्म तत्व का वर्तमान मूल्य है, जो एक इनपुट तत्व के लिए एक स्ट्रिंग है।

— मार्क राजकॉक

@MarkRajcok क्या आप मुझे इसके लिए प्रलेखन की ओर इशारा कर सकते हैं, इसलिए मैं अपनी बाकी देव टीम के साथ साझा कर सकता हूं?

— नील एस

@NeilS, निकटतम कोणीय

— मार्क राजकोक