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

Posted 2023-05-07

【中文标题】带有动态 ajax url 选项的 ng2-select2

【英文标题】：ng2-select2 with dynamic ajax url option

【发布时间】：2019-09-17 02:01:15

【问题描述】：

我有一个角组件，它有一个带有两个下拉菜单的表单。第一个下拉非常简单。用户可以从静态项目列表中进行选择。第二个下拉菜单是一个 select2，它应该允许用户从从远程 API 中提取的结果列表中进行选择。当用户在第一个下拉菜单中更改他们的选择时，我需要能够更改 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 不会改变。 我曾希望filtersNodeChange() 将查询参数cm_list 的值更改为用户从第一个下拉菜单中选择的值。

【参考方案1】：

好的，我想通了。我不得不使用一点点 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;
    ,