关于angular8：单击按钮时设置ng-select2的值


Set value of ng-select2 on a button click

这种情况是，当用户按下页面上存在的编辑按钮时，我需要设置下拉菜单的值(ng-select2)。我正在使用ajax来获取选项。该代码是成angular的。
我从以下网址获得了参考：https://github.com/tealpartners/ng-select2

1
2
3
4
5
6
7
8
9
10
    <label for="uploader">Select Uploader<span class="asterick-red">*</span>
    </label>
    <ng-select2 formControlName="uploader" id="uploader" [options]="select2Options" width="270">
    </ng-select2>

   
        <label for="uploader">Select Approver<span class="asterick-red">*</span>
        </label>
        <ng-select2 formControlName="approver" [id]="uploader" [options]="select2Options" width="270">
        </ng-select2>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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* '"
    }
  }

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 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');
      })

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

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

1
2
3
import { Select2OptionData} from 'ng-select2';

patch_panel_array: Select2OptionData[];

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

1
2
3
4
5
6
7
8
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个字段：

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