ฉันจะรับตัวเลือกใหม่ใน "เลือก" ใน Angular 2 ได้อย่างไร

ฉันใช้ Angular 2 (TypeScript)

ฉันต้องการทำบางสิ่งกับตัวเลือกใหม่ แต่สิ่งที่ฉันได้รับ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.
}

หากคุณไม่ต้องการผูกข้อมูลสองทาง:

<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>และใช้ API ของฟอร์มใหม่

คุณสามารถส่งค่ากลับเข้าไปในองค์ประกอบโดยการสร้างตัวแปรอ้างอิงบนแท็กเลือก#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);
}

เพียงแค่ใช้ [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>

ฉันพบปัญหานี้ในขณะที่ทำการสอนแบบฟอร์ม Angular 2 (เวอร์ชัน TypeScript) ที่ https://angular.io/docs/ts/latest/guide/forms.html

บล็อกการเลือก / ตัวเลือกไม่อนุญาตให้เปลี่ยนค่าของการเลือกโดยการเลือกหนึ่งในตัวเลือก

ทำในสิ่งที่ Mark Rajcok แนะนำให้ใช้งานแม้ว่าฉันจะสงสัยว่ามีบางสิ่งที่ฉันพลาดในการสอนดั้งเดิมหรือหากมีการอัปเดต ในกรณีใด ๆ เพิ่ม

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

ถึง hero-form.component.ts ในคลาส HeroFormComponent

และ

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

เพื่อ hero-form.component.html ใน<select>องค์ประกอบทำให้การทำงาน

ใช้ selectionChange ในมุม 6 ขึ้นไป ตัวอย่าง (selectionChange)= onChange($event.value)

ตัวเลือกอื่นคือการจัดเก็บวัตถุในค่าเป็นสตริง:

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

นี่เป็นวิธีเดียวที่ฉันจะได้รับการเชื่อมโยงสองทางเพื่อกำหนดค่าที่เลือกในการโหลดหน้า นี่เป็นเพราะรายการของฉันที่เติมช่องเลือกไม่ใช่วัตถุเดียวกันที่แน่นอนเนื่องจากการเลือกของฉันถูกผูกไว้กับและต้องเป็นวัตถุเดียวกันไม่ใช่แค่ค่าคุณสมบัติเดียวกัน

<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>

ฉันใช้สิ่งนี้เพื่อเลื่อนวัสดุเชิงมุม ทำงานได้ดี

ล่าสุด ionic 3.2.0 ได้แก้ไข (เปลี่ยน) เป็น (ionChange)

เช่น: HTML

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

TS

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

}

เชิงมุม 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);
  }

ในAngular 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);
}

ใน Angular 8 คุณสามารถใช้ "selectionChange" ดังนี้:

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