带有动态 ajax url 选项的 ng2-select2
ng2-select2 with dynamic ajax url option
我有一个 angular 组件,它有一个带有两个下拉菜单的表单。第一个下拉非常简单。用户可以从静态项目列表中 select。第二个下拉是 select2,它应该允许用户从从远程 API 拉取的结果列表中 selected。当用户在第一个下拉菜单中更改他们的 selection 时,我需要能够更改 select2 组件使用的 url。
这是我现在的代码:
HTML:
<div class="row">
<div class="col-md-3">
<div style="margin-top:10px;text-align: right;font-weight: bold">
<label> Node </label>
</div>
</div>
<div class="col-md-6">
<div class="form-group half-margin-bottom">
<div class="form-group__text ">
<select name="node" id="node" (ngModelChange)="filtersNodeChange($event)" [(ngModel)]="userInputNode">
<option *ngFor="let node of nodePullDownValues" [value]="node">{{ node }}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-3">
<div style="margin-top:10px;text-align: right;font-weight: bold">
<label> Filter Key </label>
</div>
</div>
<div class="col-md-6">
<div class="form-group half-margin-bottom">
<div class="form-group__text ">
<select2 [options]="select2Options"></select2>
</div>
</div>
</div>
</div>
</div>
打字稿:
export class MappingDynamicComponent implements OnInit {
... omitted for brevity ...
userInputNode = 'unknown';
... omitted for brevity ...
constructor( ... ) {
...
}
setSelect2Options () {
this.select2Options = {
'width': '100%',
'minimumInputLength': 3,
'ajax': {
'url': "http://dev-03.example.com:5200/api/v1/cm/cm_list/?cm_type=" + this.userInputNode + "&start_date=" + this.startDate,
'dataType': 'json',
'data': function (params) {
var query = { 'starts_with': params.term, 'page': params.page || 1 };
// Query parameters will be ?search=[term]&page=[page]
return query;
},
'processResults': function (data) {
var results = [];
for (var i = 0; i < data.results.length; i++ ) { results.push( { "id": i+1, "text": data.results[i]} ); }
// Tranforms the top-level key of the response object from 'items' to 'results'
return { 'results': results };
}
}
};
}
... omitted for brevity ...
filtersNodeChange(event) {
this.userInputNode = event;
this.setSelect2Options();
}
ngOnInit() {
this.errorText = "";
this.setStartDate();
this.setNodePullDownValues();
this.activatedRoute.queryParams.subscribe(params => {
this.userInputNode = params['node'];
this.setSelect2Options();
... omitted for brevity ...
});
}
我遇到的问题是 select2 组件使用的 url
在用户从第一个下拉列表中 selects 新选项时没有改变。
我曾希望 filtersNodeChange()
会将查询参数 cm_list
的值更改为用户从第一个下拉列表中 select 编辑的值。
好的,我明白了。我不得不得到 jQuery、$( "#node" ).val()
的一点点结果。我将 url
函数更改为:
this.select2Options = {
...
'ajax': {
'url': function(params) {
var url = "http://dev-03.example.com:5200/api/v1/cm/cm_list/?cm_type=" + $( "#node" ).val() + "&start_date=2019-04-26";
return url;
},
我有一个 angular 组件,它有一个带有两个下拉菜单的表单。第一个下拉非常简单。用户可以从静态项目列表中 select。第二个下拉是 select2,它应该允许用户从从远程 API 拉取的结果列表中 selected。当用户在第一个下拉菜单中更改他们的 selection 时,我需要能够更改 select2 组件使用的 url。
这是我现在的代码:
HTML:
<div class="row">
<div class="col-md-3">
<div style="margin-top:10px;text-align: right;font-weight: bold">
<label> Node </label>
</div>
</div>
<div class="col-md-6">
<div class="form-group half-margin-bottom">
<div class="form-group__text ">
<select name="node" id="node" (ngModelChange)="filtersNodeChange($event)" [(ngModel)]="userInputNode">
<option *ngFor="let node of nodePullDownValues" [value]="node">{{ node }}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-3">
<div style="margin-top:10px;text-align: right;font-weight: bold">
<label> Filter Key </label>
</div>
</div>
<div class="col-md-6">
<div class="form-group half-margin-bottom">
<div class="form-group__text ">
<select2 [options]="select2Options"></select2>
</div>
</div>
</div>
</div>
</div>
打字稿:
export class MappingDynamicComponent implements OnInit {
... omitted for brevity ...
userInputNode = 'unknown';
... omitted for brevity ...
constructor( ... ) {
...
}
setSelect2Options () {
this.select2Options = {
'width': '100%',
'minimumInputLength': 3,
'ajax': {
'url': "http://dev-03.example.com:5200/api/v1/cm/cm_list/?cm_type=" + this.userInputNode + "&start_date=" + this.startDate,
'dataType': 'json',
'data': function (params) {
var query = { 'starts_with': params.term, 'page': params.page || 1 };
// Query parameters will be ?search=[term]&page=[page]
return query;
},
'processResults': function (data) {
var results = [];
for (var i = 0; i < data.results.length; i++ ) { results.push( { "id": i+1, "text": data.results[i]} ); }
// Tranforms the top-level key of the response object from 'items' to 'results'
return { 'results': results };
}
}
};
}
... omitted for brevity ...
filtersNodeChange(event) {
this.userInputNode = event;
this.setSelect2Options();
}
ngOnInit() {
this.errorText = "";
this.setStartDate();
this.setNodePullDownValues();
this.activatedRoute.queryParams.subscribe(params => {
this.userInputNode = params['node'];
this.setSelect2Options();
... omitted for brevity ...
});
}
我遇到的问题是 select2 组件使用的 url
在用户从第一个下拉列表中 selects 新选项时没有改变。
我曾希望 filtersNodeChange()
会将查询参数 cm_list
的值更改为用户从第一个下拉列表中 select 编辑的值。
好的,我明白了。我不得不得到 jQuery、$( "#node" ).val()
的一点点结果。我将 url
函数更改为:
this.select2Options = {
...
'ajax': {
'url': function(params) {
var url = "http://dev-03.example.com:5200/api/v1/cm/cm_list/?cm_type=" + $( "#node" ).val() + "&start_date=2019-04-26";
return url;
},