편도 바인딩 angle2를 사용하여 입력 필드에 값이 표시되지 않습니다.

Question

목표 : 드롭 다운 선택에 따라 값 모음을 가져 와서 숨겨진 입력 필드에 배치하여 내 모델에 포함시킵니다.

상대 HTML : 내가 선택한 foo에 대한 데이터를 얻을 수 onSelect를라는 함수를 호출 위의 코드에서

<select class="selectFoo" (change)="onSelect($event.target.value)" name="FooName" ngModel> 
 
      <option selected="selected">--Select--</option> 
 
      <option *ngFor="let foo of foos" [value]="foo.ID">{{foo.Name}} 
 
</option> 
 
</select> 
 
<input type="hidden" [value]="fooAddress" name="FooAddress" ngModel/>

. 웹 서비스 호출을 사용하여 정보를 채 웁니다. 다음은 내 TS 파일의 스 니펫입니다.

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

 
import { Foo } from './model'; 
 

 
import { DataService } from './data.service'; 
 

 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'add-on', 
 
    templateUrl: './app.component.html' 
 
}) 
 
export class AppComponent implements OnInit { 
 
    foos : Foo[]; 
 

 
    selectedFoo: Foo; 
 
    fooAddress: string; 
 

 
    onSelect(fooID){ 
 
     this.selectedFoo = null; 
 
     for(var i = 0; i < this.foos.length; i++) 
 
     { 
 
     console.log(this.foos[i].ID); 
 
     if(this.foos[i].ID == fooID){ 
 
      this.selectedFoo = this.foos[i]; 
 
      this.fooAddress = this.selectedFoo.Address.toString(); 
 
     } 
 
     } 
 
    } 
 
    }

나는 원래 selectedFoo 내 값을 바인딩 한 가지 방법을 시도하지만 정의되지 않은 내 주소 값을 나타내는 오류가 발생했습니다. 나는 selectedFoo와 같은 값을 설정할 수 있다는 것을 알아 차렸고 오류가 발생하지 않았다. 그래서 선택한 foo를 기반으로 fooAddress로 설정된 새 변수를 만들었습니다. 비록 그것이 가치가 있다는 것을 알았지 만 코드를 밟아도 가치가 없다.

내 모델에서 사용할 수 있도록 값을 채우려면 어떻게해야합니까? 다른 것을 제공해야하는지 알려주세요.

감사합니다.

다음

<select name="FooName" [(ngModel)]="selectedFoo"> 
    <option>--Select--</option> 
    <option *ngFor="let foo of foos" [ngValue]="foo" >{{foo.Name}}</option> 
</select> 
<input type="hidden" [value]="selectedFoo?.Address" name="FooAddress" /> 

//Assuming your 'foo' items are e.g. { ID: 1, Name: 'Hello', Address: '123 Hello St'} 

당신이 오히려을 처리하기 위해 필요한 것보다, 직접 숨겨진 입력 필드에 selectedFoo의 Address 속성을 바인딩 할 수 있습니다 :

Answer 1

것은 내가 올바르게 다음이 같은 작업 것입니다 후이 무엇인지 이해하고있는 경우 (change) 이벤트.