Mengikat elemen pilih ke objek di Angular

Saya ingin mengikat elemen pilih ke daftar objek - yang cukup mudah:

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

Dalam hal ini, tampaknya itu selectedValueakan menjadi nomor - id dari item yang dipilih.

Namun, saya sebenarnya ingin mengikat objek negara itu sendiri sehingga selectedValueobjeknya bukan hanya id. Saya mencoba mengubah nilai opsi seperti:

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

tapi ini sepertinya tidak berhasil. Tampaknya menempatkan objek di saya selectedValue- tetapi bukan objek yang saya harapkan. Anda dapat melihat ini dalam contoh Plunker saya .

Saya juga mencoba mengikat ke acara perubahan sehingga saya bisa mengatur sendiri objek berdasarkan id yang dipilih; Namun, tampaknya acara perubahan diaktifkan sebelum ngModel terikat diperbarui - artinya saya tidak memiliki akses ke nilai yang baru dipilih pada saat itu.

Apakah ada cara bersih untuk mengikat elemen pilih ke objek dengan Angular 2?

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

Contoh StackBlitz

CATATAN: Anda dapat menggunakan [ngValue]="c"alih-alih di [ngValue]="c.id"mana c adalah objek negara yang lengkap.

[value]="..."hanya mendukung nilai string yang
[ngValue]="..."mendukung tipe apa pun

memperbarui

Jika valueobjek, instance yang dipilih harus identik dengan salah satu nilai.

Lihat juga perbandingan ubahsuaian yang baru ditambahkan https://github.com/angular/angular/issues/13268 tersedia sejak 4.0.0-beta.7

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

Berhati-hatilah jika Anda ingin mengakses di thisdalam 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;
}

Ini bisa membantu:

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

Anda dapat melakukan ini juga tanpa perlu menggunakan tag [(ngModel)]Anda<select>

Deklarasikan variabel dalam file ts Anda

toStr = JSON.stringify;

dan dalam template Anda lakukan ini

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

dan kemudian gunakan

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

untuk mengurai string kembali ke objek JavaScript yang valid

Ini bekerja untuk saya:

HTML templat:

Saya menambahkan (ngModelChange)="selectChange($event)"ke 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>

Pada component.ts:

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

Anda perlu menambahkan ke component.tsfungsi ini:

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

Catatan: Saya mencoba [select]="oneOption.id==model.myListOptions.id"dan tidak bekerja.

============= Cara lain dapat: =========

HTML templat:

Saya menambahkan [compareWith]="compareByOptionIdke 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>

Pada component.ts:

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

Anda perlu menambahkan ke component.tsfungsi ini:

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

Untuk berjaga-jaga jika seseorang ingin melakukan hal yang sama menggunakan Formulir Reaktif:

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

Lihat contoh kerja di sini

Anda Dapat Memilih Id menggunakan Fungsi

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

Bagi saya ini berfungsi seperti ini, Anda dapat menghibur event.target.value.

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

Juga, jika tidak ada hal lain dari solusi yang diberikan tidak berfungsi, periksa apakah Anda mengimpor "FormsModule" di dalam "AppModule", itu adalah kunci bagi saya.

Buat pengambil lain untuk item yang dipilih

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

Dalam ts:

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

Anda bisa mendapatkan nilai yang dipilih juga dengan bantuan klik () dengan melewatkan nilai yang dipilih melalui fungsi

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

gunakan cara ini juga ..

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

Dalam app.component.html:

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

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

pendekatan itu akan selalu berhasil, namun Jika Anda memiliki daftar dinamis, pastikan Anda memuatnya sebelum model