जब कोई विकल्प चुना जाता है तो मैं एक फ़ंक्शन कॉल करना चाहता हूं। कुछ खोज के बाद यह लगता है मैं का उपयोग करना होगा:सामग्री 2 स्वत: पूर्ण: विकल्प का चयन करें
संपत्ति optionSelections की MdAutocompleteTrigger
प्रलेखन में: https://material.angular.io/components/component/autocomplete optionSelections स्वत: पूर्ण विकल्प चयन की स्ट्रीम।
मुझे समझ में नहीं आता कि, स्ट्रीम क्या है, इसे कैसे कार्यान्वित किया जाए?
MD-विकल्प आप सेट कर सकते "onSelect"
<md-autocomplete #auto="mdAutocomplete">
<md-option (onSelect)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option>
</md-autocomplete>
पर के बाद से बीटा 3, कार्यक्षमता बदल गया है:
<md-autocomplete #auto="mdAutocomplete">
<md-option (onSelectionChange)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option>
</md-autocomplete>
मैं जवाब "onSelect" के साथ जा नहीं मिल सका नवीनतम कोणीय सामग्री (2.0.0-बीटा 3)। इसे कभी नहीं बुलाया गया था।
मैं अब यह है कि खोजने हूँ:
<md-option *ngFor="let item of item" [value]="item.name" (onSelectionChange)="myChangeFunc($event, item)">
{{ item.name }}
</md-option>
दूसरे शब्दों में यह अब onSelectionChange कहा जा रहा है। दस्तावेज़ अभी भी अस्पष्ट प्रतीत होते हैं और "स्वत: पूर्ण विकल्प चयनों का स्ट्रीम" कहना जारी रखते हैं जिसका वास्तव में कुछ भी मतलब नहीं है।
फ्रांसेसो का जवाब भी देखें, हालांकि अधिकांश स्थितियों के लिए आपको घटना की जानकारी देखने के लिए $ ईवेंट में प्रवेश करने की आवश्यकता होगी।
@ पीटर्स मैं नवीनतम संस्करण में स्विच कर चुका हूं और अब जब मैं एक नया तत्व चुनता हूं तो चयन चयन को दो बार निकाल दिया जाता है। क्या यह आपके साथ भी होता है? मैंने विवरण के साथ एक SO सवाल बनाया: http://stackoverflow.com/questions/44056913/md-autocomplete-onselectionchange-fired-twice – Francesco
@ फ्रांसेस्को यह एक ज्ञात बग है: https://github.com/angular/material2/ मुद्दों/4356 कोड कोड के कारण बीटा 5 में इसे विलय नहीं किया गया था, मुझे उम्मीद है कि यह बीटा 6 में है, मुझे किसी भी कामकाज की जानकारी नहीं है, दो त्वरित परिवर्तनों में दो बदलावों के लिए कोडिंग के अलावा/पाठ की जांच करना इनपुट क्षेत्र में। यह शायद फिक्स के लिए इंतजार कर लायक है। – PeterS
onSelectionChange घटना selected घटना को प्रतिस्थापित कर दी गई है क्योंकि आइटम को चुना या अचयनित होने पर ईवेंट के बीच अंतर करना अब संभव है।
दो मामलों के बीच अंतर करने के लिए लक्ष्य विधि में $event पैरामीटर पास करने की आवश्यकता है, अन्यथा एमडी-ऑटोकॉप्लेट विधि को दो बार बुलाएगा (एक बार नए चुने हुए आइटम के साथ और एक बार अचयनित/पिछले मान के साथ) । हालांकि यह अच्छा होगा कि दस्तावेज इस बदलाव के बारे में कुछ और स्पष्ट होंगे।
केवल घटना "का चयन करें पर":
खाका
<md-autocomplete #panel="mdAutocomplete" [displayWith]="displayFn">
<md-option (onSelectionChange)="selected($event, country)"
*ngFor="let country of filteredCountries | async" [value]="country">
<div class="selector-elements">
{{ country.name }}
</div>
</md-option>
नियंत्रक
selected(event: MdOptionSelectionChange, country: ICountry) {
if (event.source.selected) {
this.propagateChange(country);
}
}
सामग्री Autocomplet ई घटक अपने स्वयं के optionSelected घटना आउटपुट है:
टेम्पलेट:
<mat-autocomplete (optionSelected)="onSelectionChanged($event)">
<mat-option *ngFor="let item of myItems" [value]="item">
{{ item }}
</mat-option>
</mat-autocomplete>
नियंत्रक:
import { MatAutocompleteSelectedEvent } from '@angular/material';
// ...
onSelectionChanged(event: MatAutocompleteSelectedEvent) {
console.log(event.option.value);
}
मैं अपने घटक मैं में MdAutocompleteTrigger है करने में सक्षम हूँ जोड़ें: '@ ViewChild (MdAutocompleteTrigger) ट्रिगर: MdAutocompleteTrigger; ' ' ngAfterContentInit() { सेटटाइमआउट (() => this.trigger.openPanel()); } ' लेकिन मैं optionSelections उपयोग नहीं कर सकते, किसी ने मुझसे एक उदाहरण – Yoamb
दे सकते हैं कर सकते हैं मैं कोशिश इस ' ngAfterContentInit() { setTimeout ((=> Observable.merge (...) this.trigger.optionSelections) । सदस्यता के ((विकल्प) => console.log (विकल्प))); } 'लेकिन काम नहीं कर रहा – Yoamb