Açısal 2'deki “seç” bölümünde nasıl yeni seçim alabilirim?

Açısal 2 (TypeScript) kullanıyorum.

Yeni seçim ile bir şeyler yapmak istiyorum, ama aldığım onChange()şey her zaman son seçim. Yeni seçimi nasıl alabilirim?

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

İki yönlü veri bağlamaya ihtiyacınız yoksa:

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

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

İki yönlü veri bağlama için, olay ve özellik bağlamalarını ayırın:

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

Eğer devicesbağlama için, nesneler dizi ngValueyerine 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- kullanmaz <form>
Plunker- <form>yeni formlar API'sını kullanır ve kullanır

Seçme etiketi üzerinde bir referans değişkeni oluşturarak #deviceve değişiklik işleyicisine ileterek onChange($event, device.value)değeri yeni bir değere sahip olması gerekir.

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

Sadece [değer] yerine [ngValue] kullanın !!

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>

Https://angular.io/docs/ts/latest/guide/forms.html adresindeki Açısal 2 form öğreticisini (TypeScript sürümü) yaparken bu sorunla karşılaştım.

Seçim / seçenek bloğu, seçeneklerden birini seçerek seçimin değerinin değiştirilmesine izin vermiyordu.

Mark Rajcok'un önerdiğini yapmak, orijinal öğreticide kaçırdığım bir şey olup olmadığını veya bir güncelleme olup olmadığını merak ediyorum. Her durumda,

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

HeroFormComponent sınıfındaki hero-form.component.ts

ve

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

<select>öğesinde hero-form.component.html dosyasını çalıştırdı

select'i kullanın: Açısal 6 ve üstü ile değiştirin. misal (selectionChange)= onChange($event.value)

Başka bir seçenek de nesneyi dize olarak saklamaktır:

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

bileşen:

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

Sayfa yüklemesinde seçim değerini ayarlamak için iki yönlü ciltleme çalışmanın tek yolu buydu. Bunun nedeni, seçim kutusunu dolduran listemin, seçimlerimin bağlı olduğu ile tam olarak aynı nesne olmaması ve yalnızca aynı özellik değerleriyle değil aynı nesne olması gerektiğidir.

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

Bunu açısal Malzeme açılır menüsü için kullandım. iyi çalışıyor

En son iyonik 3.2.0, (ionChange) olarak değiştirildi (değiştirildi)

ör .: HTML

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

TS

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

}

Açısal 7/8

Açısal 6'dan itibaren, reaktif formlar direktifiyle ngModel giriş özelliğinin kullanımı, kullanımdan kaldırılmış ve açısal 7 + 'da tamamen kaldırılmıştır. Burada resmi dokümanı okuyun.

Reaktif form yaklaşımını kullanarak seçilen verileri şu şekilde alabilir / ayarlayabilirsiniz;

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

In açısal 5 aşağıdaki şekilde yaptı. $ event.target.value yerine $ event.value nesnesini al

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

Açısal 8'de bunun gibi "selectionChange" ifadesini kullanabilirsiniz:

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