typescript 각도 값에서 드롭 다운 값을 선택

Question

내 HTML에 드롭 다운 및 적용 버튼이 있습니다. 내 ts 파일에서 apply() 함수 및 배열이 선언되었습니다. 프런트 엔드에 값이있는 드롭 다운을 표시 할 수 있지만 적용 버튼을 클릭하면 드롭 다운에서 선택한 값을 가져올 수 없습니다. 나는 선택된 값을 표시하기 위해 지금 레터 박스를 사용한다.

TS에서

<div class="form-group"> 
       <label for="inputdefault" class="control-label col-sm-2">Portal:</label> 
       <div class="col-sm-10"> 

        <select class="form-control" id="inputdefault" name = "portal"> 
         <option *ngFor="let c of portalValues">{{c.group}}</option> 
        </select> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <button type="button" class="btn btn-primary" (click)="apply(portal)">Apply</button>      
        <button type="reset" class="btn btn-default" (click)="cancel()">Clear</button> 
       </div> 
      </div> 

,

portalValues: Array<Object> = [{id:1, group:'Enterprise'},{id:2, group:'Business'}]; 

apply(portal:any) { 
    alert(portal); 
    } 

및 경고 값이 정의로 표시된다. 드롭 다운에서 선택한 값을 가져 오는 방법.

Answer 1

이다. 이를 수행하는 방법은 여러 가지가 있습니다. 하나는 단순히 Template Reference Variable을 선언하는 것입니다. 예를 들어

:

<select class="form-control" id="inputdefault" name = "portal" #portalSelect> 
    <option [value]="c.group" *ngFor="let c of portalValues">{{c.group}}</option> 
</select> 

두 가지가 여기 있었 : 나는 그것을 참조 할 수 있도록

1. 내가 선택 요소에 #portalSelect을 추가했다.
나는 옵션 요소에 바인딩 [value] 속성을 추가하고, group 속성에 바인딩 (당신은 당신이 알아서 무엇을이 바인딩 할 수 있습니다,하지만 당신은 개체 자체를 결합 할 경우 당신은 [ngValue] 대신 사용할 필요) 를

그런 다음 선택한 포털을 구성 요소 기능에 전달하면 apply(portalSelect.value)을 사용할 수 있습니다.

양식 지원이 필요하거나 선택 항목을 구성 요소에 바인딩하려면 [(ngModel)]을 사용해야합니다.

<select [(ngModel)]="selectedPortal"> 
... 

및

selectedPortal: any; 

apply() { 
    // do something with this.selectedPortal 
} 

Answer 2

select 입력에 ngModel을 입력해야합니다. 이 같은 것이 그것을해야합니다. 이렇게하면 변수 portal이 드롭 다운에서 선택한 값에 바인딩됩니다. name 속성은이 작업을 수행하지 않습니다.

<select class="form-control" id="inputdefault" [(ngModel)]="portal" name = "portal"> 
    <option *ngFor="let c of portalValues">{{c.group}} </option> 
</select> 

또한 select 태그이 포함해야 할 수 있습니다 : 당신이 전달하는 portal 인수가 정의되어 있지 않기 때문에 #name="ngModel"