Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/367.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ng2-select2带有动态ajax url选项_Javascript_Angular_Jquery Select2 - Fatal编程技术网

Javascript ng2-select2带有动态ajax url选项

Javascript ng2-select2带有动态ajax url选项,javascript,angular,jquery-select2,Javascript,Angular,Jquery Select2,我有一个角度分量,它有一个有两个下拉的形状。第一个下拉列表非常简单。用户可以从静态项目列表中进行选择。第二个下拉列表是select2,它应该允许用户从从远程API提取的结果列表中进行选择。我需要能够在用户在第一次下拉菜单中更改其选择时更改select2组件使用的url 以下是我现在掌握的代码: HTML: 打字稿: export class MappingDynamicComponent implements OnInit { ... omitted for brevity ...

我有一个角度分量,它有一个有两个下拉的形状。第一个下拉列表非常简单。用户可以从静态项目列表中进行选择。第二个下拉列表是select2,它应该允许用户从从远程API提取的结果列表中进行选择。我需要能够在用户在第一次下拉菜单中更改其选择时更改select2组件使用的url

以下是我现在掌握的代码:

HTML:

打字稿:

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不会更改。
我曾希望filtersNodeChange会将查询参数cm_list的值更改为用户从第一次下拉列表中选择的值。

好的,我找到了答案。我必须生成一点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;
    },
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;
    },