typescript 如何停止ng select中特定选定值上的事件传播?

0yg35tkg  于 2023-01-18  发布在  TypeScript
关注(0)|答案(1)|浏览(119)

当我在ng-select下拉列表中选择特定的“其他”值时,我希望停止事件并冻结下拉列表。当用户选择“其他-请指定原因”时,下拉列表不应关闭。对于所有其他值,下拉列表应关闭

<div class="" *ngFor="let s of selectedSites">

              <div class="columnSite siteName">
                <span class="" [title]="s.site_nm">{{ s.site_nm }}</span>
              </div>
              <!-- <div class="col-md-1"></div> -->
              <div class="columnSite">
                <div class="custom-ng-select add-sites__ng-selectReason">

                  <ng-select #ngSelectTa placeholder="Select" [items]="reasonForAddingArray" [multiple]="false"
                    [clearable]="false" [searchable]="false" (opened)="opened()" (click)="reasonForAdding(s,$event)">
                    <ng-template ng-multi-label-tmp let-item="item">
                      <div class="ng-placeholder custom-text">
                        {{ getPlaceholderLabel('ngSelectTa') }}
                      </div>
                    </ng-template>

                  </ng-select>
                  <input *ngIf='inputOtherReason' [id]="s.site_nm" type="text" class="form-control inputsearch"
                    #inputSearch placeholder="Enter Reason For Adding" (keyup)="reasonForAddingOther(s,$event)"
                    [ngClass]="errorCheck(s)" />
                </div>
              
                              </div>
            </div>

.ts

reasonForAdding(site, $e) {
    console.log(site);
    console.log($e);
    let otherReason = $e.target.innerHTML;
    console.log(this.inputOtherReason);
    console.log(otherReason);
    if (Utils.isArrayExists(this.selectedSites)) {
      let reasonObj = { label: '', value: '' };
      if (otherReason != 'Others - please specify your reason.' && this.reasonForAddingArray?.includes(otherReason)) {
        reasonObj['label'] = otherReason;
        reasonObj['value'] = otherReason;
        this.inputOtherReason = false;
        this.openedValue = false;
        console.log(this.inputOtherReason);
      } else {
        this.inputOtherReason = true;
        console.log(this.inputOtherReason);
        reasonObj['label'] = 'Others';
        reasonObj['value'] = otherReason;
        this.openedValue = true;
        $e.stopImmediatePropagation();
       // $e.stopPropagation();
       // $e.preventDefault();
      }

    } 
  }
yizd12fk

yizd12fk1#

尝试使用[closeOnSelect]="false"禁用autoclose,并将选定的值和模型引用传递给组件on change event,而不是单击,然后手动关闭它。
所以,试试这个:
添加change事件,传递selected value和select model,然后执行检查,并在选择其他值时关闭select,否则它将保持打开状态:
模板:

<ng-select #ngSelectTa  (change)="reasonForAdding2($event, ngSelectTa)"  [closeOnSelect]="false"

组分:

reasonForAdding2(otherReason:any, select:any) {
    
    console.log('otherReason', otherReason);

    if(otherReason !== 'Others - please specify your reason.') {
        select.close();
    } 
}

相关问题