代码之家 › 专栏 › 技术社区 › Red Cricket

ng2-select2无法选择特定选项

jquery-select2 angular javascript

Red Cricket · 技术社区 · 7 年前

我正在使用 https://github.com/NejcZdovc/ng2-select2 角度组件来处理从远程api获取数据的下拉列表。填充的初始数据列表工作正常,我在下拉列表中选择任何选项都没有问题,但是如果我导致select2组件必须从api第二次获取数据,我将无法选择选项列表中的一个项目,并且上一个选项将保持选中状态。下面是一些正在发生的事情的屏幕显示。

初始荷载

我选择这里 dev1-access-est-1 屏幕看起来像。

到现在为止,一直都还不错。

现在我尝试将选择更改为dhcp-hkg1-1-6

但当我点击dhcp-hkg1-1-6时,过滤器键值仍然是dev1-access-est-1。

以下是我用于select2组件的HTML模板:

<div class="form-group__text ">
  <select2 name="cm_select2" id="cm_select2" [value]="filterKey" [options]="select2Options"></select2>
</div>

这里是我设置Select2选项的地方:

  setSelect2Options () {
    this.select2Options = {
      'width': '100%',
      'minimumInputLength': 3,
      'ajax': {
        'url': function(params) {
          var d = new Date(),
              month = '' + (d.getMonth() + 1),
              day = '' + d.getDate(),
              year = d.getFullYear();

          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;

          var startDate = [year, month, day].join('-');
          var url = "http://dev-03.example.com/api/v1/cm/cm_list/?cm_type=" + $( "#node" ).val() + "&start_date=" + startDate + '&source=mongo';
          return url;
        },
        '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, "text": data.results[i]} ); }
           // Tranforms the top-level key of the response object from 'items' to 'results'
           return { 'results': results };
        }
      }
    };
  }

0 回复 | 直到 7 年前

Hari Pillai 7 年前

请尝试将cache:false添加到选项中,好吗

'ajax': {
        'cache': false,
        'url': function(params) {
          var d = new Date(),
              month = '' + (d.getMonth() + 1),
              day = '' + d.getDate(),
              year = d.getFullYear();

          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;

          var startDate = [year, month, day].join('-');
          var url = "http://dev-03.example.com/api/v1/cm/cm_list/?cm_type=" + $( "#node" ).val() + "&start_date=" + startDate + '&source=mongo';
          return url;
        },

Red Cricket 7 年前

我发现每次访问远程API都会使问题变得更严重。在第二次调用远程API时,我无法从列表中选择两个选项。我阅读了我在上面的评论中指出的问题,意识到不能重用 id 从一个对后端API的调用到下一个,所以我决定在每个调用中添加纪元时间 身份证件 在我的 processResults()

'processResults': function (data) {
    var results = [];
    const epochTime = (new Date).getTime();
    // work around for issue https://github.com/NejcZdovc/ng2-select2/issues/136 (use epoch time to get unique ids.
    for (var i = 0; i < data.results.length; i++ ) { results.push( { "id": i + epochTime, "text": data.results[i]} ); }
    // Tranforms the top-level key of the response object from 'items' to 'results'
    return { 'results': results };
}

如果有人找到更好的解决方案,请在这里发布。