Question

我正在开发一个Angular 2项目。我创建了一个下拉组件，如下所示：

  public function Index()
{
    return View::make('stats');
}

并用于我的其他组件

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

Answer 1

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

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

请勿忘记从Output导入@angular/core并将输出属性包含在您的组件中：

@Output select

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

1 个答案: