선택 요소를 각도로 객체에 바인딩

select 요소를 객체 목록에 바인딩하고 싶습니다.

@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선택한 항목의 ID 인 숫자로 나타납니다 .

그러나 실제로 국가 개체 자체에 바인딩 selectedValue하여 ID가 ​​아닌 개체가되도록하고 싶습니다 . 옵션 값을 다음과 같이 변경하려고했습니다.

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

그러나 이것은 작동하지 않는 것 같습니다. 내 물건을 놓는 것처럼 보이지만 selectedValue내가 기대하는 물건은 아닙니다. 내 Plunker 예제에서 이것을 볼 수 있습니다 .

또한 선택된 id를 기반으로 객체를 직접 설정할 수 있도록 change 이벤트에 바인딩을 시도했습니다. 그러나 바인딩 된 ngModel이 업데이트되기 전에 변경 이벤트가 발생하는 것으로 보입니다. 즉, 해당 시점에서 새로 선택한 값에 액세스 할 수 없습니다.

선택 요소를 Angular 2를 사용하여 객체에 바인딩하는 명확한 방법이 있습니까?

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

StackBlitz 예제

참고 : c가 완전한 국가 개체 인 경우 [ngValue]="c"대신 사용할 수 있습니다 [ngValue]="c.id".

[value]="..."문자열 값만
[ngValue]="..."지원 모든 유형을 지원

최신 정보

(가)하면 value객체가 상기 사전 선택된 인스턴스의 값 중 하나와 동일 할 필요가있다.

4.0.0-beta.7부터 사용 가능한 최근에 추가 된 사용자 지정 비교 https://github.com/angular/angular/issues/13268 참조

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

액세스를 원하는 경우의주의 this내에서 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;
}

이것은 도움이 될 수 있습니다.

    <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]="compareByOptionId했습니다 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>

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>

작업 예제를 확인 하십시오.

기능을 사용하여 ID를 선택할 수 있습니다

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

또한 주어진 솔루션의 다른 방법으로도 작동하지 않으면 "AppModule"내부에 "FormsModule"을 가져 왔는지 확인하십시오.

선택한 항목에 대해 다른 게터 생성

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

선택한 값을 함수를 통해 전달하여 click ()을 사용하여 선택한 값을 얻을 수도 있습니다.

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

이 방법은 항상 작동하지만 동적 목록이 있으면 모델 보다 먼저로드 해야합니다.