[Html] 각도로 객체를 선택하기 위해 바인딩



Answers

도움이 될 수 있습니다.

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

Question

저는 앵귤러에 익숙하지 않고 새로운 방식으로 속도를 높이려고 노력하고 있습니다.

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가 아니라 객체이기 때문에 실제로 country 객체 자체에 바인딩하려고합니다. 옵션의 값을 다음과 같이 변경해 보았습니다.

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

그러나 이것은 효과가없는 것 같습니다. 그것은 내 selectedValue에 개체를 배치하는 것으로 보이지만 내가 예상하는 개체는 아닙니다. 내 Plunker 예제에서이를 볼 수 있습니다.

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

선택된 요소를 각도 2의 객체에 바인딩하는 명확한 방법이 있습니까?




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




함수를 사용하여 ID를 선택할 수 있습니다.

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



그것은 나를 위해 일했다.

템플릿 HTML :

내 선택에 (ngModelChange)="selectChange($event)" 를 추가했습니다.

<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" 시도 [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;
 }



Links