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




typescript (6)

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

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

<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 for new selectedDevice, but what I
    // got here is always last selection, not the one I just select.
}

आप चुनिंदा टैग #device पर एक संदर्भ चर बनाकर घटक में वापस मान पारित कर सकते हैं और इसे बदलकर हैंडलर पर #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);
}

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

<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);
}

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


नवीनतम आयनिक 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);

}

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

<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 ऑब्जेक्ट्स हैं, तो value बजाय ngValue पर ngValue :

<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> का उपयोग करता है और नए रूपों एपीआई का उपयोग करता है


बस [मूल्य] के बजाय [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>

कोणीय 5 में मैंने निम्नलिखित तरीके से किया। $ event.target.value के बजाय ऑब्जेक्ट $ event.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);
}





typescript