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

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>

但我无法访问组件 class 中下拉列表的选定值。

如果我使用 <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/core 导入 Output 并将输出属性包含到您的组件中：

@Output select

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

Get selected value from custom dropdown component

typescript

angular-ui-bootstrap

angular2-forms

angular