사용자 지정 드롭 다운 구성 요소에서 선택한 값 가져 오기

Question

저는 Angular 2 프로젝트에서 작업하고 있습니다. 나는 다음과 같이 드롭 다운 구성 요소를 만들었습니다

@Component({ 
    selector: 'dropdown', 
    template: ` <div class="row" > 
        <div class="col-sm-3"> 
    <select class="form-control" placeholder="--select--" > 
     <option 
     *ngFor="let value of values" (click)="selectItem(value.value)">{{value.text}}</option> 
    </select> 
</div> 
</div>` 
}) 

export class DropdownComponent { 
    @Input() 
    values: Array<DropdownValue>; 

    @Output() 
    select: EventEmitter<any>; 

    constructor() { 
     this.select = new EventEmitter(); 
     this.values = new Array<DropdownValue>(); 
    } 

    selectItem(value) { 
     this.select.emit(value); 
    } 
} 

을 내 다른 구성 요소

<dropdown [values]="categories" (select)="onselect($event)"></dropdown> 

에 사용하지만 구성 요소 클래스 내 드롭 다운 목록의 선택 값에 액세스하는 데 실패했습니다. 내가 드롭 생성을 위해 <u><li>를 사용하는 경우

,이 방법 onselect() 안타하지만 난 <select><option>...를 사용하여 드롭 다운 목록을 만들려면 - 선택한 값에 액세스 할 수있는 방법이있다? 방법에

<select (change)="onSelect($event.target.value)" class="form-control" placeholder="--select--" > 

선택한 값을 가져옵니다 :

export class AssetComponent 
{ 
    public categories: DropdownValue[] = [ 
     { "value": 1, "text": "Table" }, 
     { "value": 2, "text": "Chair" }, 
     { "value": 3, "text": "Light" } 
    ]; 
    public isCollapsedContent: boolean = false; 

    searchfilter(): void { 
     this.isCollapsedContent = !this.isCollapsedContent; 
     console.log("collapsed happen"); 
    } 
    onselect(value:any): void 
    { 
     console.log(value) 
    } 
} 

나는 당신은 select 요소에 change 이벤트를 사용할 필요가

<button type="button" class="btn btn-primary" (click)="searchfilter()"> 
    Search here 
</button> 

Answer 1

버튼을 클릭에 대한 드롭 다운의 값에 액세스 할 값을 @Output 속성으로 내 보냅니다.

onSelect(val) { 
    this.select.emit(val) 
} 

그리고 지금 당신은 드롭 다운 구성 요소에서 선택한 값을 얻을 수 있습니다 :

<dropdown [values]="categories" (select)="onselect($event)"></dropdown> 

는 @angular/core에서 Output를 가져올 것을 잊지 및 구성 요소에 출력 속성을 포함하지 마십시오

@Output select