ng2-select2 не может выбрать конкретную опцию

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.

Вот шаблон HTML, который я использую для компонента select2:

<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

Я обнаружил, что проблема усугубляется с каждым доступом к удаленному 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 };
}

Если кто-то найдет лучшее решение, пожалуйста, опубликуйте его здесь.

Answer 2

Можете ли вы попробовать добавить кеш: 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;
        },