Question

我有一个自动完成框我的用户控件（有输入框和ul）当用户手动删除输入框文本并移动到其他控件时，我想取消选择项目

<div class="dropdown-container">
  <input id="{{inputId}}" class="form-control" type="text" [(ngModel)]="content" name="content" placeholder="{{placeholder}}"
         (keyup)="handleKeyupEvent($event)"
         (click)="toggleDropdown($event)"
         (keyup.escape)="closeDropdown($event)"
         (blur)="onBlur($event)"
         (keydown.arrowup)="traverseDropdown($event)"
         (keydown.arrowdown)="traverseDropdown($event)"
         (keydown.enter)="onEnterSelection($event)"
         [readOnly]="readOnly"
         (focus)="onFocus($event)"
  >
  <span class="fa fa-angle-down dropdown-toggle"></span>

  <ul class="dropdown-list"
      *ngIf="dropdownOpen && filteredList.length > 0 && !readOnly"
      [ngClass]="{'align-right': alignRight, 'wrapped':!parentIsVisible, 'limited-height': closeToBottom}">
    <li *ngFor="let item of filteredList; let i=index" [ngClass]="{'focused': isFocused(i)}"
        (mousedown)="onSelection($event, i)">
      <ng-template [ngTemplateOutletContext]="{item: item}" [ngTemplateOutlet]="template"></ng-template>
    </li>
  </ul>
</div>

从this.itemSelected.emit(null);事件发出时，

onBlur行不会发出itemSelected事件，但是从onSelection事件发出时它会发出

autocompleteBox.ts文件： -

content:string = '';
@Input() options:any[] = [];
@Output() itemSelected = new EventEmitter<any>();

 public onBlur(event:any):void {
if(this.dropdownOpen){
  this.closeDropdown(null);
}

if(this.content === '') {
  this.selectedItem = null;
  this.itemSelected.emit(null);
  this.updateContent('');
  }
}

private onSelection(event:any, index:number):void {
  event.preventDefault();
  event.stopPropagation();

  if (this.filteredList.length > 0) {
    this.itemSelected.emit(this.filteredList[index]);
  }

  this.selectedItem = this.filteredList[index];
  this.content = this.selectedItem.name;
  this.closeDropdown(null);
}

consumer.html： -

<auto-complete-dropdown (itemSelected)="onContryChange($event)" 
        [options]="countries" placeholder="{{ 'selectCountry' | translate }}">
     <ng-template let-item="item" >
          <span title="{{item.id}}, {{item.displayName}}">                    
             <span>{{item.name}}</span>
        </span>
     </ng-template>
</auto-complete-dropdown>

consumer.ts

onCountryChange($event) {
    this.states= [];
    if ($event == null) {
      return;
    }
    this.getStates($event.number);
  }

我该怎么办才能itemSelected事件触发onBlur事件？

在角度5中的模糊事件中发出事件时，事件会发出问题

0 个答案: