ng2-select2 с опцией динамического URL AJAX - PullRequest
Новая
       15

ng2-select2 с опцией динамического URL AJAX

1 голос
/ 28 апреля 2019

У меня есть угловой компонент, который имеет форму с двумя опусканиями.Первое раскрытие довольно простое.Пользователь может выбрать из статического списка элементов.Второе выпадающее меню - это select2, который должен позволять пользователю выбирать из списка результатов, извлекаемых из удаленного API.Мне нужно иметь возможность изменять URL-адрес, который использует компонент select2, когда пользователь изменяет свой выбор в первом раскрытии.

Вот код, который у меня сейчас есть:

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>

TypeScript: 

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

Проблема, с которой я столкнулся, заключается в том, что url, используемый компонентом select2, не меняется, когда пользователь выбирает новую опцию из первого раскрывающегося списка.Я надеялся, что filtersNodeChange() изменит значение параметра запроса cm_list на то, что пользователь выбрал из первого раскрывающегося списка.

1 Ответ

1 голос
/ 28 апреля 2019

хорошо, я понял это.Я должен был привести к чуть-чуть 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;
    },
...