Rad*_*nov 11 jquery jquery-select2 typescript angular
我正在尝试集成Select2到Angular2我正在构建的应用程序中.我设法select2运行,我的多个选择按预期转换.我现在的问题是如何获取所选值以及我应该使用哪个事件进行绑定.我尝试(change)在select元素上绑定事件但没有发生任何事情.也许我应该使用插件select2-container元素创建的其他事件?
该select2插件集成以下这个答案.
有人试过类似的混合?是否有可能让它工作或我必须转而使用ng2-select指令?
更新
奖金问题:) - 即使我放弃select2并使用标准的多重选择,我该如何获得其价值?我尝试将它绑定到属性[(ngModel)]="_selectedValues"但是当我选择任何选项时它仍然是空的.多重复选框是多项选择的唯一方式吗?
更新2
对于奖金问题 - 我发现的解决方法是使用单向事件绑定(change)="selectedValues=$event.target.selectedOptions".然后我添加了一个像这样setter的selectedValues属性:
public set selectedValues(value: Array<any>) {
this._selectedValues.length = 0;
for(let v of value){
this._selectedValues.push(v.value);
}
};
Run Code Online (Sandbox Code Playgroud)
Rad*_*nov 30
select2我找到的唯一可行解决方案是在ngAfterViewInit方法中使用jQuery获取值,如下所示:
jQuery('.fields-select').on(
'change',
(e) => this._selectedValues = jQuery(e.target).val()
);
Run Code Online (Sandbox Code Playgroud)
所以我的最终代码如下所示:
import {Component, AfterViewInit} from 'angular2/core';
@Component({
selector: 'filters',
templateUrl: 'template.html'
})
export class FiltersComponent implements AfterViewInit {
private _availableFields: Array<any> = ['Value1', 'Value2', 'Value3','Value4'];
private _selectedFields: Array<string> = [];
ngAfterViewInit(){
jQuery('.fields-select').select2();
jQuery('.fields-select').on(
'change',
(e) => this._selectedFields = jQuery(e.target).val()
);
};
}
Run Code Online (Sandbox Code Playgroud)
在模板中:
<select id="fields" class="form-control fields-select" multiple="multiple">
<option *ngFor="#field of _availableFields" [value]="field">{{field}}</option>
</select>
Run Code Online (Sandbox Code Playgroud)
希望有一天能拯救某人的生命:)
| 归档时间: |
|
| 查看次数: |
14122 次 |
| 最近记录: |