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

Question

मैं Angular 2 (टाइपस्क्रिप्ट) का उपयोग कर रहा हूं।

मैं नए चयन के साथ कुछ करना चाहता हूं, लेकिन मुझे जो मिलता है onChange()वह हमेशा अंतिम चयन होता है। मुझे नया चयन कैसे मिल सकता है?

<select [(ngModel)]="selectedDevice" (change)="onChange($event)">
   <option *ngFor="#i of devices">{{i}}</option>
</select>

onChange($event) {
    console.log(this.selectedDevice);
    // I want to do something here with the new selectedDevice, but what I
    // get here is always the last selection, not the one I just selected.
}

Answer 1

यदि आपको दो-तरफ़ा डेटा-बाइंडिंग की आवश्यकता नहीं है:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let i of devices">{{i}}</option>
</select>

onChange(deviceValue) {
    console.log(deviceValue);
}

दो-तरफ़ा डेटा-बाइंडिंग के लिए, ईवेंट और प्रॉपर्टी बाइंडिंग को अलग करें:

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of devices">{{i}}</option>
</select>

export class AppComponent {
  devices = 'one two three'.split(' ');
  selectedDevice = 'two';
  onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;
    // ... do other stuff here ...
}

---

यदि devicesवस्तुओं का सरणी है, तो ngValueइसके बजाय बाँधें value:

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
  <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
{{selectedDeviceObj | json}}

export class AppComponent {
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
  selectedDeviceObj = this.deviceObjects[1];
  onChangeObj(newObj) {
    console.log(newObj);
    this.selectedDeviceObj = newObj;
    // ... do other stuff here ...
  }
}

---

Plunker- नए रूपों एपीआई का <form>
Plunkerउपयोग <form>और उपयोग नहीं करता है

Comments

anwere सही है, लेकिन यहाँ अभी भी उलझन में है क्या आप इसे exaplain कर सकते हैं?

— परदीप जैन

@PardeepJain, NgModel के साथ दो-तरफ़ा डेटा बाइंडिंग का उपयोग करते हुए, कोणीय 1 का कारण बनता है) selectedDeviceजब उपयोगकर्ता एक अलग वस्तु का चयन करता है, तो स्वचालित रूप से अपडेट हो जाता है, और 2) यदि हम मान सेट करते हैं selectedDevice, तो NgModel स्वचालित रूप से दृश्य को अपडेट करेगा। चूंकि हम भी एक बदलाव के बारे में सूचित करना चाहते हैं इसलिए मैंने (change)इवेंट बाइंडिंग को जोड़ा । हमें इसे इस तरह नहीं करना चाहिए ... हमें दो-तरफ़ा डेटा बाइंडिंग को तोड़ने में सक्षम होना चाहिए [ngModel]="selectedDevice" and (ngModelChange)="onChange($event)", लेकिन जैसा कि मुझे पता चला है, onChange()इस तरह से प्रत्येक चयनित सूची परिवर्तन के लिए दो बार कॉल किया जाता है।

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

ओके थैंक्स एक बात और प्लीज। मैं मूल्य प्राप्त करना चाहता हूं: <option *ngFor="#course of course_array #i=index" #newone value={{course.id}} >{{course.course_name}}</option> course.course_nameऔर course.idदोनों मैं इन दोनों को (परिवर्तन) फ़ंक्शन के माध्यम से कैसे भेज सकता हूं?

— परदीप जैन

@HongboMiao, विशेष $eventचर / प्रतीक "बयान संदर्भ" का हिस्सा है जो कि कोणीय टेम्पलेट स्टेटमेंट्स हैं। अगर इसके बजाय मैं लिखता (ngModelChange)="onChange('abc')"तो newValueस्ट्रिंग मिलता abc। यह सामान्य जावास्क्रिप्ट फ़ंक्शन कॉलिंग है।

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

@HongboMiao, [ngValue] का उपयोग करें यदि आपके पास वस्तुओं की एक सरणी है। [मूल्य] का उपयोग करें यदि आपके पास आदिम प्रकार (स्ट्रिंग, बूलियन, पूर्णांक) की एक सरणी है।

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

Answer 2

आप चुनिंदा टैग पर एक संदर्भ चर बनाकर घटक में वापस मान पारित कर सकते हैं #deviceऔर इसे परिवर्तन हैंडलर में onChange($event, device.value)पास करके नया मान होना चाहिए

<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">
    <option *ng-for="#i of devices">{{i}}</option>
</select>

onChange($event, deviceValue) {
    console.log(deviceValue);
}

Comments

आप ngModelयहाँ नहीं आ रहे हैं, आप नामक एक नए चर के लिए बाध्य कर रहे हैं device।

— लक्स

क्या के रोल [(ngModel)]यहाँ

— प्रदीप जैन

@ आप और मार्क दोनों सही हैं। आशा है कि आप समझ सकते हैं कि मैं केवल एक उत्तर चुन सकता हूं। :)

— हांगबो मियाओ

Answer 3

बस [मूल्य] के बजाय [ngValue] का उपयोग करें !!

export class Organisation {
  description: string;
  id: string;
  name: string;
}
export class ScheduleComponent implements OnInit {
  selectedOrg: Organisation;
  orgs: Organisation[] = [];

  constructor(private organisationService: OrganisationService) {}

  get selectedOrgMod() {
    return this.selectedOrg;
  }

  set selectedOrgMod(value) {
    this.selectedOrg = value;
  }
}


<div class="form-group">
      <label for="organisation">Organisation
      <select id="organisation" class="form-control" [(ngModel)]="selectedOrgMod" required>
        <option *ngFor="let org of orgs" [ngValue]="org">{{org.name}}</option>
      </select>
      </label>
</div>

Comments

इससे मुझे मदद मिली। सुनिश्चित नहीं है कि मेरा मामला थोड़ा अलग है, लेकिन मेरे (change)="selectOrg(selectedOrg)"लिए फ़ंक्शन का चयन करेंऑर्ग वर्तमान / पिछले चयन के साथ, न कि नए चयनित विकल्प के साथ। मुझे पता चला, मुझे (change)बिट की भी जरूरत नहीं है ।

— निक

अच्छा खोलना। हाँ यह पुराने मॉडल को पारित करने (बदलने) के साथ अजीब व्यवहार है। मैंने सोचा था कि यह एनजी-परिवर्तन की तरह होगा, शायद यह कोणीय 2 में एक बग है। मैंने इसे प्राप्त करने और विधियों को सेट करने के लिए अद्यतन किया है। इस तरह से सेट selectOrgMod (मान) विधि में मुझे पता चल सकता है कि संगठन ने मेरी संगठनात्मक टीमों की सूची को बदल दिया है और अपडेट कर रहा है।

— रॉबर्ट राजा

Answer 4

Https://angular.io/docs/ts/latest/guide/forms.html पर कोणीय 2 रूपों ट्यूटोरियल (टाइपस्क्रिप्ट संस्करण) करते हुए मैं इस समस्या में भाग गया।

चयन / विकल्प ब्लॉक विकल्पों में से एक का चयन करके चयन के मूल्य को बदलने की अनुमति नहीं दे रहा था।

मार्क राजकोक ने जो सुझाव दिया था, उस पर काम करते हुए, हालांकि मैं सोच रहा हूं कि क्या कुछ ऐसा है जो मैंने मूल ट्यूटोरियल में याद किया था या यदि कोई अपडेट था। किसी भी मामले में, जोड़ना

onChange(newVal) {
    this.model.power = newVal;
}

HeroFormComponent वर्ग में हीरो-form.component.ts को

तथा

(change)="onChange($event.target.value)"

<select>तत्व में Hero-form.component.html ने इसे काम किया

Answer 5

कोणीय 6 और इसके बाद के संस्करण में सेचेंज का उपयोग करें। उदाहरण (selectionChange)= onChange($event.value)

Comments

मैंने प्रतिक्रियाशील रूप दृष्टिकोण का उपयोग नहीं किया है। मुझे उस एकल मूल्य के आधार पर सेवा कॉल को ट्रिगर करने के लिए चयनित मूल्य की आवश्यकता है .. ऊपर की विधि ने मेरी मदद की।

— अनवरास लम्पुर

Answer 6

एक और विकल्प स्ट्रिंग के रूप में मूल्य में वस्तु को संग्रहीत करना है:

<select [ngModel]="selectedDevice | json" (ngModelChange)="onChange($event)">
    <option [value]="i | json" *ngFor="let i of devices">{{i}}</option>
</select>

घटक:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

यह एकमात्र तरीका था जिससे मुझे पेज लोड पर चयन मान सेट करने के लिए दो तरह से बाध्यकारी काम मिल सकता था। ऐसा इसलिए था क्योंकि मेरी सूची जो चुनिंदा बॉक्स को पॉप्युलेट करती है, ठीक वैसी ही वस्तु नहीं थी, जैसा मेरे चयन के लिए बाध्य थी और इसे एक ही वस्तु होने की जरूरत है, न कि केवल समान संपत्ति मूल्यों की।

Answer 7

<mat-form-field>
<mat-select placeholder="Vacancies" [(ngModel)]="vacanciesSpinnerSelectedItem.code" (ngModelChange)="spinnerClick1($event)"
    [ngModelOptions]="{standalone: true}" required>
    <mat-option *ngFor="let spinnerValue of vacanciesSpinnerValues" [value]="spinnerValue?.code">{{spinnerValue.description}}</mat-option>
</mat-select>

मैंने इसे कोणीय सामग्री छोड़ने के लिए इस्तेमाल किया। ठीक काम करता है

Answer 8

नवीनतम आयनिक 3.2.0 (आयनचेंज) में बदलाव (बदलाव) किया है

जैसे: HTML

<ion-select (ionChange)="function($event)"> <ion-option>1<ion-option>
</ion-select>

टीएस

function($event){
// this gives the selected element
 console.log($event);

}

Answer 9

कोणीय 7/8

कोणीय 6 के रूप में, प्रतिक्रियाशील रूपों के निर्देश के साथ ngModel इनपुट संपत्ति के उपयोग को कुल 7+ में हटा दिया गया है और पूरी तरह से हटा दिया गया है। आधिकारिक डॉक यहां पढ़ें।

प्रतिक्रियाशील रूप दृष्टिकोण का उपयोग करके आप चयनित डेटा को प्राप्त / सेट कर सकते हैं;

      //in your template
 <select formControlName="person" (change)="onChange($event)"class="form-control">
    <option [value]="null" disabled>Choose person</option>
      <option *ngFor="let person of persons" [value]="person"> 
        {{person.name}}
    </option>
 </select> 


 //in your ts
 onChange($event) {
    let person = this.peopleForm.get("person").value
    console.log("selected person--->", person);
    // this.peopleForm.get("person").setValue(person.id);
  }

Answer 10

में कोणीय 5 मैं निम्नलिखित तरीके के साथ किया था। वस्तु मिल $ event.value के बजाय $ event.target.value

<mat-form-field color="warn">
   <mat-select (ngModelChange)="onChangeTown($event)" class="form-width" formControlName="branch" [(ngModel)]="branch" placeholder="Enter branch">
     <mat-option *ngFor="let branch of branchs" [value]="branch.value">
                  {{ branch.name }}
     </mat-option>
   </mat-select>
</mat-form-field>

onChangeTown(event): void {
  const selectedTown = event;
  console.log('selectedTown: ', selectedTown);
}

Answer 11

कोणीय 8 में आप बस इस तरह से "SelectionChange" का उपयोग कर सकते हैं:

 <mat-select  [(value)]="selectedData" (selectionChange)="onChange()" >
  <mat-option *ngFor="let i of data" [value]="i.ItemID">
  {{i.ItemName}}
  </mat-option>
 </mat-select>