เลือกองค์ประกอบที่จะผูกวัตถุในเชิงมุม

ฉันต้องการผูกองค์ประกอบที่เลือกลงในรายการของวัตถุ - ซึ่งง่ายพอ:

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

ในกรณีนี้ดูเหมือนว่าselectedValueจะเป็นตัวเลข - รหัสของรายการที่เลือก

อย่างไรก็ตามจริง ๆ แล้วฉันต้องการผูกกับวัตถุในประเทศเพื่อให้selectedValueเป็นวัตถุแทนที่จะเป็นเพียง ID ฉันพยายามเปลี่ยนค่าของตัวเลือกดังนี้:

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

แต่ดูเหมือนว่าจะไม่ทำงาน ดูเหมือนว่าจะวางวัตถุในของฉันselectedValue- แต่ไม่ใช่วัตถุที่ฉันคาดหวัง คุณสามารถเห็นนี้ในตัวอย่าง Plunker ของฉัน

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

มีวิธีที่สะอาดในการผูกองค์ประกอบที่เลือกเข้ากับวัตถุด้วย Angular 2 หรือไม่?

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

ตัวอย่าง StackBlitz

หมายเหตุ: คุณสามารถใช้[ngValue]="c"แทน[ngValue]="c.id"ตำแหน่งที่ c เป็นวัตถุของประเทศที่สมบูรณ์

[value]="..."รองรับเฉพาะค่าสตริง
[ngValue]="..."รองรับประเภทใดก็ได้

ปรับปรุง

ถ้าvalueเป็นวัตถุอินสแตนซ์ที่เลือกไว้จะต้องเหมือนกันกับหนึ่งในค่า

ดูเพิ่มเติมการเปรียบเทียบแบบกำหนดเองที่เพิ่งเพิ่มเมื่อเร็ว ๆ นี้https://github.com/angular/angular/issues/13268 มีให้ตั้งแต่ 4.0.0-beta.7

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

ดูแลถ้าคุณต้องการเข้าถึงภายในthiscompareFn

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

สิ่งนี้สามารถช่วย:

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

คุณสามารถทำได้เช่นกันโดยไม่จำเป็นต้องใช้[(ngModel)]ใน<select>แท็กของคุณ

ประกาศตัวแปรในไฟล์ ts ของคุณ

toStr = JSON.stringify;

และในแม่แบบที่คุณทำสิ่งนี้

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

แล้วใช้

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

เพื่อแยกสตริงกลับเข้าไปในวัตถุ JavaScript ที่ถูกต้อง

มันใช้งานได้สำหรับฉัน:

เทมเพลต HTML:

ฉันเพิ่มของฉัน(ngModelChange)="selectChange($event)"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>

บน component.ts:

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

คุณต้องเพิ่มcomponent.tsฟังก์ชั่นนี้:

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

หมายเหตุ: ฉันลองด้วย[select]="oneOption.id==model.myListOptions.id"และไม่ทำงาน

============= วิธีอื่นได้: =========

เทมเพลต HTML:

ฉันเพิ่มของฉัน[compareWith]="compareByOptionIdselect

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

บน component.ts:

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

คุณต้องเพิ่มcomponent.tsฟังก์ชั่นนี้:

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

ในกรณีที่มีใครบางคนกำลังมองหาที่จะทำแบบเดียวกันโดยใช้แบบฟอร์มปฏิกิริยา:

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

ตรวจสอบตัวอย่างการทำงานที่นี่

คุณสามารถเลือกรหัสโดยใช้ฟังก์ชั่น

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

สำหรับฉันมันทำงานเช่นนี้คุณสามารถปลอบevent.target.valueใจ

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

นอกจากนี้หากไม่มีสิ่งใดจากโซลูชันที่ให้มาใช้งานไม่ได้ให้ตรวจสอบว่าคุณนำเข้า "FormsModule" ด้านในของ "AppModule" นั่นเป็นกุญแจสำคัญสำหรับฉันหรือไม่

สร้างทะเยอทะยานอื่นสำหรับรายการที่เลือก

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

ใน ts:

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

คุณสามารถรับค่าที่เลือกได้ด้วยความช่วยเหลือของการคลิก () โดยการส่งผ่านค่าที่เลือกผ่านฟังก์ชั่น

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

ใช้วิธีนี้เช่นกัน ..

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

ในapp.component.html:

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

และ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>

วิธีการนั้นจะใช้งานได้เสมออย่างไรก็ตามหากคุณมีรายการแบบไดนามิกตรวจสอบให้แน่ใจว่าคุณโหลดก่อนรุ่น