각도 4 - 드롭 다운

Question

내가 값을 드롭 다운에서 선택

<select id="city" formControlName="city" (change)="onCitySelect($event)" > 
    <option *ngFor="let city of cities" [ngValue]="city" > 
     {{ city }} 
    </option> 
</select> 

, 나는이 메서드를 호출하고 선택된 값을 표시 할 드롭 다운을 만들 각도 4 반응성 양식을 사용하고

에서 선택한 값을 찾을 수 있습니다.

는 여기에 드롭 다운과 같이 도시 이름을 인쇄 할 기다리고 있었다이

onCitySelect(event) { 
    console.log(event.target.value); 
} 

을 내 코드입니다. 그러나 인덱스 번호도 표시하는 것 같습니다. 예를 들어

2: London 

실제로는 드롭 다운에 표시되는 London 대신 표시됩니다.

색인없이 도시 이름을 얻으려면 어떻게해야합니까?

Answer 1

문자열이나 숫자를 옵션 값으로 사용하고 [(ngModel)]="..."을 사용하지 않으려는 경우 [ngValue] 대신 [value]을 사용하십시오.

개체 값의 경우 항상 [ngValue]을 사용해야합니다.

Answer 2

당신이 각도 4 반응성 양식을 사용하고 있기 때문에 다음과 같이 수행 할 수 있습니다

export class myComponent{ 
    myForm: FormGroup; 

    ngOnInit(){ 
     this.myForm = new FormGroup({ 
      city: new FormControl('', Validators.required) 
     } 
    } 

    onCitySelect($event:any){ 
     console.log(this.myForm.controls["city"].value); 
    } 
} 

그래서 당신은 사용할 수 있습니다 :

하자 당신이 당신의 구성 요소에 대한 당신의 타이프 스크립트 파일에이 선언이 있다고 this.myForm.controls["city"].value을 city에 대해 선택한 값에 액세스하십시오.

Answer 3

당신은 당신이 할 수있는 값의 변화에 ​​따라서이

(change)="onCitySelect($event)" 

을 제거의 기능을 발사 formControl 구독 할 수 있습니다이 'myForm을'은 'formControl을 가지고 당신의 formGroup

this.myForm.get('city').valueChanges.subscribe(value=>{ 
    console.log(value); 
}) 

입니다 city ​​' 그래서 값을 선택할 때마다 console.log()가 발생하므로 onChange 이벤트를 추가 할 필요가 없습니다.

[ngValue] 대신 [값]을 직접 제공 할 수 있으며 여기에서 정의한 가치가 로그온 할 수있게됩니다.