从自定义下拉组件获取选定的值

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