Binden eines ausgewählten Elements an ein Objekt in Angular

Ich möchte ein ausgewähltes Element an eine Liste von Objekten binden - was einfach genug ist:

@Component({
   selector: 'myApp',
   template: `<h1>My Application</h1>
              <select [(ngModel)]="selectedValue">
                 <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
              </select>`
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null;
}

In diesem Fall scheint es selectedValuesich um eine Zahl zu handeln - die ID des ausgewählten Elements.

Ich möchte jedoch tatsächlich an das Länderobjekt selbst binden, sodass dies selectedValueeher das Objekt als nur die ID ist. Ich habe versucht, den Wert der Option folgendermaßen zu ändern:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

aber das scheint nicht zu funktionieren. Es scheint ein Objekt in meinem zu platzieren selectedValue- aber nicht das Objekt, das ich erwarte. Sie können dies in meinem Plunker-Beispiel sehen .

Ich habe auch versucht, eine Bindung an das Änderungsereignis herzustellen, damit ich das Objekt basierend auf der ausgewählten ID selbst festlegen kann. Es scheint jedoch, dass das Änderungsereignis ausgelöst wird, bevor das gebundene ngModel aktualisiert wird. Dies bedeutet, dass ich zu diesem Zeitpunkt keinen Zugriff auf den neu ausgewählten Wert habe.

Gibt es eine saubere Möglichkeit, ein ausgewähltes Element mit Angular 2 an ein Objekt zu binden?

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz Beispiel

HINWEIS: Sie können [ngValue]="c"anstelle von verwenden[ngValue]="c.id" c das vollständige Länderobjekt verwenden.

[value]="..." unterstützt nur Zeichenfolgenwerte
[ngValue]="..." unterstützt jeden Typ

aktualisieren

Wenn das valueein Objekt ist, muss die vorausgewählte Instanz mit einem der Werte identisch sein.

Siehe auch den kürzlich hinzugefügten benutzerdefinierten Vergleich https://github.com/angular/angular/issues/13268 , der seit 4.0.0-beta.7 verfügbar ist

<select [compareWith]="compareFn" ...

Achten Sie darauf, ob Sie thisinnerhalb zugreifen möchten compareFn.

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}

Dies könnte helfen:

    <select [(ngModel)]="selectedValue">
          <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
    </select>

Sie können dies auch tun, ohne es [(ngModel)]in Ihrem <select>Tag verwenden zu müssen

Deklarieren Sie eine Variable in Ihrer ts-Datei

toStr = JSON.stringify;

und in Ihrer Vorlage tun Sie dies

 <option *ngFor="let v of values;" [value]="toStr(v)">
      {{v}}
 </option>

und dann verwenden

let value=JSON.parse(event.target.value)

um die Zeichenfolge wieder in ein gültiges JavaScript-Objekt zu analysieren

Es hat bei mir funktioniert:

HTML-Vorlage:

Ich fügte (ngModelChange)="selectChange($event)"meinem hinzu select.

<div>
  <label for="myListOptions">My List Options</label>
  <select (ngModelChange)="selectChange($event)" [(ngModel)]=model.myListOptions.id >
    <option *ngFor="let oneOption of listOptions" [ngValue]="oneOption.id">{{oneOption.name}}</option>
  </select>
</div>

Auf component.ts:

  listOptions = [
    { id: 0, name: "Perfect" },
    { id: 1, name: "Low" },
    { id: 2, name: "Minor" },
    { id: 3, name: "High" },
  ];

Und Sie müssen zu component.tsdieser Funktion hinzufügen :

  selectChange( $event) {
    //In my case $event come with a id value
    this.model.myListOptions = this.listOptions[$event];
  }

Hinweis: Ich versuche es mit [select]="oneOption.id==model.myListOptions.id"und arbeite nicht.

============= Eine andere Möglichkeit kann sein: =========

HTML-Vorlage:

Ich fügte [compareWith]="compareByOptionIdmeinem hinzu select.

<div>
  <label for="myListOptions">My List Options</label>
  <select [(ngModel)]=model.myListOptions [compareWith]="compareByOptionId">
    <option *ngFor="let oneOption of listOptions" [ngValue]="oneOption">{{oneOption.name}}</option>
  </select>
</div>

Auf component.ts:

  listOptions = [
    { id: 0, name: "Perfect" },
    { id: 1, name: "Low" },
    { id: 2, name: "Minor" },
    { id: 3, name: "High" },
  ];

Und Sie müssen zu component.tsdieser Funktion hinzufügen :

 /* Return true or false if it is the selected */
 compareByOptionId(idFist, idSecond) {
    return idFist && idSecond && idFist.id == idSecond.id;
 }

Nur für den Fall, dass jemand das Gleiche mit reaktiven Formularen tun möchte:

<form [formGroup]="form">
  <select formControlName="country">
    <option *ngFor="let country of countries" [ngValue]="country">{{country.name}}</option>
  </select>
  <p>Selected Country: {{country?.name}}</p>
</form>

Schauen Sie sich das Arbeitsbeispiel hier

Sie können die ID mithilfe einer Funktion auswählen

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

Für mich funktioniert es so, Sie können trösten event.target.value.

<select (change) = "ChangeValue($event)" (ngModel)="opt">   
    <option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>

Wenn nichts anderes aus bestimmten Lösungen nicht funktioniert, überprüfen Sie, ob Sie "FormsModule" in "AppModule" importiert haben. Das war ein Schlüssel für mich.

Erstellen Sie einen weiteren Getter für das ausgewählte Element

<form [formGroup]="countryForm">
  <select formControlName="country">
    <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
  </select>

  <p>Selected Country: {{selectedCountry?.name}}</p>
</form>

In ts:

get selectedCountry(){
  let countryId = this.countryForm.controls.country.value;
  let selected = this.countries.find(c=> c.id == countryId);
  return selected;
}

Sie können den ausgewählten Wert auch mit Hilfe von click () abrufen, indem Sie den ausgewählten Wert durch die Funktion übergeben

<md-select placeholder="Select Categorie"  
    name="Select Categorie" >
  <md-option *ngFor="let list of categ" [value]="list.value" (click)="sub_cat(list.category_id)" >
    {{ list.category }}
  </md-option>
</md-select>

benutze diesen Weg auch ..

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
     <option *ngFor="let c of countries" value="{{c.id}}">{{c.name}}</option>
 </select>

In app.component.html:

 <select type="number" [(ngModel)]="selectedLevel">
          <option *ngFor="let level of levels" [ngValue]="level">{{level.name}}</option>
        </select>

Und app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  levelNum:number;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}
  ];

  toNumber(){
    this.levelNum = +this.levelNum;
    console.log(this.levelNum);
  }

  selectedLevel = this.levels[0];

  selectedLevelCustomCompare = {num: 1, name: "BB"}

  compareFn(a, b) {
    console.log(a, b, a && b && a.num == b.num);
    return a && b && a.num == b.num;
  }
}

<select name="typeFather"
    [(ngModel)]="type.typeFather">
        <option *ngFor="let type of types" [ngValue]="type">{{type.title}}</option>
</select>

Dieser Ansatz wird jedoch immer funktionieren. Wenn Sie eine dynamische Liste haben, stellen Sie sicher, dass Sie diese vor dem Modell laden