Jak Mogę uzyskać nowy wybór w "Wybierz" w Angular 2?

Możesz przekazać wartość z powrotem do komponentu, tworząc zmienną referencyjną na znaczniku select #device i przekazując ją do obsługi zmiany onChange($event, device.value) powinna mieć nową wartość

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

Wystarczy użyć [ngValue] zamiast [value]!!

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>

Napotkałem ten problem podczas robienia Angular 2 forms tutorial (Wersja TypeScript) w https://angular.io/docs/ts/latest/guide/forms.html

Blok select/option nie pozwalał na zmianę wartości zaznaczenia poprzez wybranie jednej z opcji.

Robienie tego, co sugerował Mark Rajcok, zadziałało, chociaż zastanawiam się, czy jest coś, co przegapiłem w oryginalnym samouczku, czy była aktualizacja. W każdym razie dodanie

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

To postać bohatera.komponent.ts w klasie HeroFormComponent

I

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

Użyj funkcji selectionChange w angular 6 i nowszych. przykład (selectionChange)= onChange($event.value)

Inną opcją jest zapisanie obiektu w wartości jako łańcuch znaków:

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

Składnik:

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

Był to jedyny sposób, w jaki mogłem uzyskać dwukierunkowe powiązanie, aby ustawić wartość select przy ładowaniu strony. Wynika to z faktu, że moja lista wypełniająca pole select nie była dokładnie tym samym obiektem, do którego przypisany był mój select I musi to być ten sam obiekt, a nie tylko te same wartości właściwości.

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

Użyłem tego do kątowego spadku materiału. działa dobrze

Kątowa 7/8

Od angular 6, użycie właściwości wejściowej ngModel z dyrektywą reactive forms zostało wycofane i całkowicie usunięte w angular 7+. przeczytaj oficjalny dokument tutaj.

Za pomocą metody reactive form można uzyskać / ustawić wybrane dane jako;

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

W Angular 8 możesz po prostu użyć "selectionChange" w następujący sposób:

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

I was has same problem and i solved using the below code:

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

Najnowsza wersja ionic 3.2.0 została zmodyfikowana (change) na (ionChange)

Eg: HTML

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

TS

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

}

Próbowałem wszystkich sugestii i nic nie działa na mnie.

Wyobraź sobie sytuację: potrzebujesz 2-drożnego powiązania i masz wyszukiwanie z wartościami liczb i chcesz wypełnić SELECT wartościami z tego wyszukiwania i wyróżnić wybraną opcję.

Użycie [value] lub (ngModelChange) jest niemożliwe, ponieważ nie będzie można wybrać wybranej opcji po zainicjowaniu zmiany przez użytkownika: [value] uważa wszystko za string , Jak na (ngModelChange) - oczywiście nie powinno być używane, gdy użytkownik inicjuje zmianę, więc niszczy właściwy wybór. Użycie [ngModel] gwarantuje stały format otrzymanej wartości jako INDEX: VALUE i łatwo jest ją odpowiednio przeanalizować, jednak po raz kolejny - niszczy wybraną opcję.

Więc idziemy z [ngValue] (który zajmie się odpowiednimi typami), (change) I... [value], co gwarantuje, że obsługa otrzyma wartość, a nie wyświetloną wartość lub INDEX: wartość :) Poniżej znajduje się mój rozwiązanie robocze:

  <select
    class="browser-default custom-select"
    (change)="onEdit($event.target.value)"
  >
    <option [value]="">{{
      '::Licences:SelectLicence' | abpLocalization
    }}</option>
    <ng-container *ngIf="licencesLookupData$ | async">
      <option
        *ngFor="let l of licencesLookupData$ | async"
        [ngValue]="l.id"
        [value]="l.id"
        [selected]="l.id == selected.id"
      >
        {{ l.id }} &nbsp;&nbsp; {{ l.displayName | defaultValue }}
      </option>
    </ng-container>
  </select>

  onEdit(idString: string) {
    const id = Number(idString);
    if (isNaN(id)) {
      this.onAdd();
      return;
    }
    this.licencesLoading = true;
    this.licencesService
      .getById(id)
      .pipe(finalize(() => (this.licencesLoading = false)), takeUntil(this.destroy))
      .subscribe((state: Licences.LicenceWithFlatProperties) => {
        this.selected = state;
        this.buildForm();
        this.get();
      });
  }

W Kątowe 5 zrobiłem to w następujący sposób. get the object $ event.wartość zamiast $event.cel.wartość

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

Od angular 7 i wyżej, ponieważ ngModel jest przestarzały, możemy po prostu użyć kontrolki, aby uzyskać nową wybraną wartość bardzo łatwo w reaktywny sposób.

Przykład:

<form [formGroup]="frmMyForm">
  <select class="form-control" formControlName="fieldCtrl">
    <option value=""></option>
    <option value="val1">label val 1</option>
    <option value="val2">label val 2</option>
    <option value="val3">label val 3</option>
  </select>
</form>

this.frmMyForm.get('fieldCtrl').valueChanges.subscribe( value => {
  this.selectedValue = value;
});

Używając tego w pełni reaktywnego sposobu, możemy łatwiej uaktualnić starszą wersję aplikacji angular do nowszej.