Question

我正在使用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>

这是我设置select2Options的地方：

  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 };
        }
      }
    };
  }

Answer 1

您能不能尝试在选项中添加缓存：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;
        },

Answer 2

我发现每次访问远程API的问题都变得更加严重。在第二次调用远程API时，我无法从列表中选择两个选项。我阅读了我在上面的评论中指出的问题，并且意识到一个人不能重用id从一个对后端API的调用到下一个调用，因此我决定为每个id添加时间我的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 };
}

如果有人找到更好的解决方案，请在此处发布。

ng2-select2无法选择特定选项

2 个答案: