时间戳

首页 > 解决方案 > 在按钮单击时设置 ng-select2 的值

jquery-select2 - 在按钮单击时设置 ng-select2 的值

问题描述

场景是，当用户按下页面上的编辑按钮时，我需要设置下拉列表的值（ng-select2） 。我正在使用 ajax 来获取选项。代码是有角度的。我参考了：https ://github.com/tealpartners/ng-select2

<div class="form-div">
    <label for="uploader">Select Uploader<span class="asterick-red">*</span> 
    </label>
    <ng-select2 formControlName="uploader" id="uploader" [options]="select2Options" width="270">
    </ng-select2>
</div>
    <div class="form-div">
        <label for="uploader">Select Approver<span class="asterick-red">*</span> 
        </label>
        <ng-select2 formControlName="approver" [id]="uploader" [options]="select2Options" width="270">
        </ng-select2>
    </div>
</div>

setSelect2Options() {
    this.select2Options = {
      triggerChange: true,
      allowClear: true,
      placeholder : 'Select User* ',
      minimumInputLength: 3,
      ajax: {
        url: '/api/reward/uploader/approver/search/user?limit=15',
        headers: {
          'X-XSRF-TOKEN': sessionStorage.getItem("auth"),
          'content-type': 'application/json'
        },
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term, page) {
          return {
            q: term.term, // search term
            _: term._type
          };
        },
        processResults: function (data) {
          return {
            results: $.map(data.results, function (item) {
              return {
                id: item.id,
                text: item.name + " - " + item.email
              }
            })
          };
        }
      },
      //[placeholder]="'Select User* '"
    }
  }

上面的代码很好。但是现在单击按钮我需要在选择框中设置一个值。

 this.vcDataService.getUploaderAproverDetails(id).subscribe((res: any) => {
      this.uploaderApproverForm.controls['approver'].setValue(res.approverDetails.uploaderUserId);
      this.uploaderApproverForm.controls['uploader'].setValue(res.uploaderDetails.approverUserId);
      console.log("134", res)//uploaderUserId
      //this.select2Options.ajax.processResults.push({id: 103, text: "aa"})
      this.select2Options.placeholder="aa";
      //this.displayUploader = "aaa";

      // $('#uploader').val('ENABLED_FROM_JS');
      // $('#uploader').trigger('change');
      // this.select2Options.templateSelection = {
      //   selected: true,
      //   id: res.approverDetails.approverUserId,
      //  text: res.approverDetails.approverName,
      //  title: res.approverDetails.approverName
      // }

      // this.select2Options.initSelection = {
      //   callback: {
      //     data: {"id":103, "text":'ENABLED_FROM_JS'}
      //   }
      // }
      console.log(this.select2Options);
      this.updateApproverUploader = true;
      this.uploaderApproverId = res.uploaderApproverId;
        this.cd.detectChanges();
    },
      err => {
        Swal.fire('Oops...', err.error.err, 'error');
      })

我尝试了几件事，但没有得到解决方法。

标签： jquery-select2angular8

解决方案

在浏览了文档后，我找到了解决方案。我使用了 ng-select2 的 data 属性并将其分配给 Select2OptionData 类型的变量。

import { Select2OptionData} from 'ng-select2';

patch_panel_array: Select2OptionData[];

然后我添加了需要在字段中显示的所需数据，如下所示：

res.panelApprovers.map(item => {
    this.patch_panel_array.push({
      id: item.panelApproverUserId,
      text: item.panelApproverUserName + " - " + item.panelApproverUserEmail
    })
    approverIds.push(String(item.panelApproverUserId));
  });
    this.formData.controls['panelApprover'].setValue(approverIds);

这是我的选择 2 字段：

<ng-select2 formControlName="panelApprover" [data]="patch_panel_array" [options]="select2OptionsPanel" width="100%" style="width: 100%;">
                                                        </ng-select2>

推荐阅读