從自定義下拉組件獲取選定的值

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>...創建下拉列表 - 有沒有什麼方法可以訪問選定的值？

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) 
    } 
} 

我要訪問按鈕的下拉的價值點擊

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

Answer 1

您需要使用select元素的change事件：

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

獲取選中的值轉換的方法，並將該值發送到@Output財產：

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

現在你可以從下拉列表組件中選定值：

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

不要忘了導入從@angular/coreOutput，包括輸出屬性的組件：

@Output select