Angular 角度2的剑道网格-按键时过滤器输入的焦点丢失

我创建了一个剑道网格组件，在该组件中，每个按键都会丢失对过滤器文本字段的关注。我的组件如下所示-

    <kendo-grid [data]="getKendoRecords()"
                [skip]="kendoGridPageDataSkip"
                [pageable]="true"
                [pageSize]="getPageSize(options)"
                [navigable]="true"
                [resizable]="true"
                [filterable]="true"
                [filter]="filter"
                [selectable]="{enabled: true, checkboxOnly: true }"
                [kendoGridSelectBy]="'record'"
                [selectedKeys]="kendoSelectedItems"
                (cellClick)="gridCellClick($event)"
                (selectedKeysChange)="onSelectedKeysChange($event)"
                (pageChange)="kendoPageChange($event)"
                (filterChange)="applyFilter($event)"
                >
      <kendo-grid-checkbox-column *ngIf="hasCheckbox()" width="45" showSelectAll="true" [resizable]="false">
        <ng-template kendoGridHeaderTemplate>
          <input class="k-checkbox" id="{{'selectAllCheckboxId_' + options.listId}}" kendoGridSelectAllCheckbox
                 [state]="selectAllState" [disabled]="isReadOnly()"
                 (selectAllChange)="onSelectAllChange($event)">
          <label class="k-checkbox-label" for="{{'selectAllCheckboxId_' + options.listId}}"></label>
        </ng-template>
      </kendo-grid-checkbox-column>
      <kendo-grid-column *ngFor="let property of selectedView.properties" 
                         field="{{getKendoFieldName(property.propertyName)}}"
                         title="{{getKendoFieldName(property.propertyLabel)}}"
                         [filterable]="isSearchableProperty(property, options)"
                         [minResizableWidth]="30">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false" operator="contains">
            <kendo-filter-contains-operator></kendo-filter-contains-operator>
          </kendo-grid-string-filter-cell>
        </ng-template>
         <ng-template kendoGridHeaderTemplate>
           {{property.propertyLabel}}
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)=='date'" kendoGridCellTemplate let-dataItem>
           {{getKendoRecordValue(property, dataItem) | date:formatDate()}}
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)=='time'" kendoGridCellTemplate let-dataItem>
           {{getKendoRecordValue(property, dataItem) | time:formatTime()}}
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)=='boolean'" kendoGridCellTemplate let-dataItem>
           <input class="k-checkbox" type="checkbox" [checked]="getKendoRecordValue(property, dataItem)" [disabled]="true" />
           <label class="k-checkbox-label"></label>
         </ng-template>
         <ng-template *ngIf="getKendoEditorType(property)!='date' && getKendoEditorType(property)!='boolean'" kendoGridCellTemplate let-dataItem>
           {{getKendoRecordValue(property, dataItem)}}
         </ng-template>
       </kendo-grid-column>
       <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
         <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
         <kendo-pager-info></kendo-pager-info>
         <kendo-pager-next-buttons></kendo-pager-next-buttons>
         <kendo-pager-page-sizes *ngIf="options.displayPageSizeSelector" [pageSizes]="pageSizeOptions"></kendo-pager-page-sizes>
       </ng-template>
    </kendo-grid>

{{property.propertyLabel}
{{getKendoRecordValue（属性，数据项）|日期：formatDate（）}
{{getKendoRecordValue（属性，数据项）|时间：formatTime（）}
{{getKendoRecordValue（属性，数据项）}

而该代码文件是—

    import { Component, Input, Output, EventEmitter, OnInit, OnChanges } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import * as _ from 'lodash';
    import { PropertyType, MessageType } from '../../../entity-common';
    import { ListService, LabelService } from '../../../app/services';
    import { EntityListHelper } from '../../../helpers';
    import { PageChangeEvent, SelectAllCheckboxState } from '@progress/kendo-angular-grid';
    import { Map } from 'immutable';

    @Component({
      selector: 'mgr-entity-list-kendo-grid',
      templateUrl: './entity-list-kendo-grid.component.html',
      providers: [EntityListHelper]
    })
    export class EntityListKendoGridComponent implements OnInit, OnChanges {
      @Input() options: any;
      @Input() endpoint: any;
      @Input() formReadOnly: boolean;
      @Input() selectedView: any;
      @Input() multiSelectValue: any;
      @Input() selectedAllPages: any;
      @Input() multiSelectField: any;
      @Input() inlineAddAction: any;
      @Input() inlineEditAction: any;
      @Input() multiAddAction: any;

      @Output() lookupSelectedEvent: EventEmitter<any> = new EventEmitter<any>();
      @Output() multiSelectIdsEvent: EventEmitter<any> = new EventEmitter<any>();

      multiSelectIds: Array<number> = [];
      kendoSelectedItems: Array<any> = [];
      PropertyType = PropertyType;
      MessageType = MessageType;

      newItem: any = { rowProperties: { editMode: false }, record: undefined };
      isSorting: boolean;
      collapsed = false;

      multiSelectSeparator = ';';

      searchParams = {
        Criteria: [],
        AdvancedConditions: ''
      };

      public checkboxOnly = false;
      public mode = 'multiple';
      public mySelection: number[] = [];
      public selectAllState: SelectAllCheckboxState = 'unchecked';
      public kendoGridPageDataSkip = 0;
      public pageSizeOptions = [];
      public filter: any;

      constructor(
        private listService: ListService,
        private labelService: LabelService,
        private helper: EntityListHelper,
        private formBuilder: FormBuilder) {
      }

      ngOnInit() {
        this.setupBase();

        if (this.options.displayPageSizeSelector) {
          this.pageSizeOptions = [5, 20, 50, 100, 200];
        }
      }

      ngOnChanges() {
        this.multiSelectIds = [];
        this.selectedAllPages = [];
        this.kendoSelectedItems = [];
        this.selectedView = this.helper.getSelectedView(this.options);
        this.options.formLayout = this.selectedView ? this.selectedView.formLayout : null;

        this.setupBase();
      }

      private setupBase() {
        if (this.options.actions) {
          this.inlineAddAction = this.options.actions.find(action => action.action === 'inlineAdd');
          this.inlineEditAction = this.options.actions.find(action => action.action === 'inlineEdit');
          this.multiAddAction = this.options.actions.find(action => action.action === 'newFromLookup');
        }

        if (this.multiSelectIds.length === 0) {
          this.selectAllState = 'unchecked';
        }
      }

      getCount(): number {
        if (this.options.records) {
          return this.options.totalCount;
        }
        return 0;
      }

      isReadOnly() {
        return this.options.readOnly || this.formReadOnly;
      }

      hasCheckbox(): boolean {
        if (this.options.actions &&
          this.options.actions.length > 0 && !this.options.disableRowSelector) {
          return true;
        } else {
          return false;
        }
      }

      rowClick(item) {
        if (this.multiSelectField) {
          this.updateMultiSelectItems(item);
          return;
        } else if (!this.options.rowClickAction) {
          return;
        } else if (this.options.rowClickAction.action.toLowerCase() === 'selectlookupvalue') {
          this.lookupSelectedEvent.emit(item);
        }

        this.options.rowClickAction.actionFunction(item);
      }

      // multiSelect logic
      updateMultiSelectItems(item) {
        if (this.multiSelectIds.indexOf(item.record.id) === -1) {
          this.addMultiSelect(item);
        } else {
          this.removeMultiSelect(item);
        }

        this.multiSelectIdsEvent.emit(this.multiSelectIds);
      }

      addMultiSelect(item) {
        if (this.multiSelectValue !== '') {
          this.multiSelectValue += this.multiSelectSeparator + ' ';
        }

        this.multiSelectValue += item.record[this.multiSelectField];
        this.multiSelectIds.push(item.record.id);
      }

      removeMultiSelect(item) {
        this.multiSelectValue = this.multiSelectValue.replace(item.record[this.multiSelectField], '');
        this.multiSelectValue = this.multiSelectValue.replace(this.multiSelectSeparator + ' ', '');

        this.multiSelectIds.splice(this.multiSelectIds.indexOf(item.record.id), 1);

        if (this.selectedAllPages.indexOf(this.options.page) >= 0) {
          this.selectedAllPages.splice(this.selectedAllPages.indexOf(this.options.page), 1);
        }
      }

      multiSelectAllCurrentPage() {
        if (this.selectedAllPages.indexOf(this.options.page) === -1) {
          this.selectedAllPages.push(this.options.page);

          for (let i = 0; i < this.options.records.length; i++) {
            if (this.multiSelectIds.indexOf(this.options.records[i].record.id) === -1) {
              this.addMultiSelect(this.options.records[i]);
            }
          }
        } else {
          this.selectedAllPages.splice(this.selectedAllPages.indexOf(this.options.page), 1);

          for (let i = 0; i < this.options.records.length; i++) {
            if (this.multiSelectIds.indexOf(this.options.records[i].record.id) >= 0) {
              this.removeMultiSelect(this.options.records[i]);
            }
          }
        }

        this.multiSelectIdsEvent.emit(this.multiSelectIds);
      }

      onListFilterSearch() {
        this.options.filterListFunction(this.searchParams);
      }

      getPageSize(options): number {
        if (!options.displayPageSizeSelector) {
          return options.pageSize;
        }

        return this.helper.getLookupPageSize(options);
      }

      getKendoRecords() {
        const totalCount = this.getCount();
        return {
          data: this.options.records,
          total: totalCount
        };
      }

      getKendoRecordValue(property, item) {
        const properties = property.propertyName.split('.');
        let object = item ? item.record : this.options.records[0].record;

        for (let i = 0; i < properties.length; i++) {
          if (!object) {
            break;
          }
          const propertyValue = properties[i];
          object = object[propertyValue];
        }
        return object;
      }

      getKendoEditorType(property) {
        switch (property.propertyType) {
          case (this.PropertyType.string):
            return 'string';
          case (this.PropertyType.checkbox || this.PropertyType.radio || this.PropertyType.boolean):
            return 'boolean';
          case (this.PropertyType.integer || this.PropertyType.number):
            return 'numeric';
          case (this.PropertyType.date):
            return 'date';
          case (this.PropertyType.time):
            return 'time';
          default:
            return 'string';
        }
      }

      getKendoFieldName(property) {
        return property.replace(/\W+/g, '');
      }

      cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
        if (!isEdited) {
          sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
        }
      }

      private createFormGroup(dataItem: any): FormGroup {
        const newFormGroup = {};

        this.selectedView.properties.forEach(property => {
          newFormGroup[this.getKendoFieldName(property.propertyLabel)] = this.getKendoRecordValue(property, dataItem);
        });

        return this.formBuilder.group(newFormGroup);
      }

      formatDate() {
        if (!this.options.fieldFormats) {
          return '';
        }

        return this.options.fieldFormats.dateFormat.toUpperCase().toString();
      }

      formatTime() {
        if (!this.options.fieldFormats) {
          return '';
        }

        return this.options.fieldFormats.timeFormat;
      }

      gridCellClick(event) {
        if (event.dataItem.rowProperties && event.dataItem.rowProperties !== null) {
          this.rowClick(this.getRecordItembypageIdLink(event.dataItem.record.id, event.dataItem.rowProperties.pageIdLink));
        } else {
          this.rowClick(this.getRecordItem(event.dataItem.record.id));
        }
      }

      getRecordItembypageIdLink(id, pageIdLink) {
        return this.options.records.find(item => item.record.id === id && item.rowProperties.pageIdLink === pageIdLink);
      }

      getRecordItem(id) {
        return this.options.records.find(item => item.record.id === id);
      }

      public onSelectedKeysChange(event) {
        this.multiSelectIds = this.kendoSelectedItems.map(record => record.id);
        this.multiSelectIdsEvent.emit(this.multiSelectIds);

        const len = this.multiSelectIds.length;

        if (len === 0) {
          this.selectAllState = 'unchecked';
        } else if (len > 0 && len < this.options.records.length) {
          this.selectAllState = 'indeterminate';
        } else {
          this.selectAllState = 'checked';
        }
      }

      public onSelectAllChange(checkedState: SelectAllCheckboxState) {
        this.multiSelectAllCurrentPage();

        if (this.multiSelectIds.length > 0) {
          this.selectAllState = 'checked';
        } else {
          this.selectAllState = 'unchecked';
        }
      }

      public kendoPageChange(event: PageChangeEvent): void {
        this.kendoGridPageDataSkip = event.skip;
        const pageSize = event.take;

        if (this.kendoGridPageDataSkip === 0) {
          this.options.page = 1;
        } else {
          this.options.page = (this.kendoGridPageDataSkip / pageSize) + 1;
        }

        const pageEvent = { pageIndex: this.options.page, pageSize: pageSize };

        this.options.paginateFunction(pageEvent);
      }

      public isSearchableProperty(property) {
        return property &&
          property.propertyType === PropertyType.string &&
          !property.prohibited &&
          this.options &&
          this.options.filterListFunction &&
          typeof this.options.filterListFunction === 'function';
      }

      public applyFilter(event: any) {
        this.filter = event;
        this.searchParams = {
          Criteria: [],
          AdvancedConditions: ''
        };

        if (!event.filters || event.filters == null || event.filters.count === 0) {
          return;
        }

        let filters: any;
        let key: string;
        let value: string;
        let operator: string;
        const conjunction = 'AND';

        event.filters.forEach(filter => {
          key = this.getKendoFieldName(filter.field);
          value = filter.value;
          operator = filter.operator;

          if (operator === 'contains') {
            value = '*' + value + '*';
          }

          filters = Map([[key, value]]);

          const newSearchParams = this.helper.createSearchParams(filters, conjunction);

          this.searchParams.Criteria = this.listService.mergeCriteria(this.searchParams.Criteria, newSearchParams.Criteria);
          this.searchParams.AdvancedConditions = this.searchParams.Criteria.map((r, index) => {
            return index + 1;
          }).join(' ' + conjunction + ' ');
        });

        this.onListFilterSearch();
      }
    }

从'@angular/core'导入{Component，Input，Output，EventEmitter，OnInit，OnChanges}；
从'@angular/forms'导入{FormBuilder，FormGroup}；
从“lodash”导入*as uuu；
从“../../../entity common”导入{PropertyType，MessageType}；
从“../../../app/services”导入{ListService，LabelService}；
从“../../../helpers”导入{EntityListHelper}；
从“@progress/kendo angular grid”导入{PageChangeEvent，SelectAllCheckboxState}；
从“不可变”导入{Map}；
@组成部分({
选择器：“管理器实体列表剑道网格”，
templateUrl:'./实体列表kendo grid.component.html'，
提供者：[EntityListHelper]
})
导出类EntityListKendoGridComponent实现OnInit、OnChanges{
@输入（）选项：任意；
@Input（）端点：任意；
@Input（）formReadOnly:布尔值；
@Input（）selectedView：任意；
@Input（）多选值：任意；
@Input（）所选全部页面：任意；
@Input（）多选字段：任意；
@inlineAddAction的Input（）值：任意；
@Input（）inlineEditAction:任意；
@Input（）多添加操作：任意；
@Output（）lookupSelectedEvent:EventEmitter=新的EventEmitter（）；
@Output（）multiSelectIdsEvent:EventEmitter=新的EventEmitter（）；
multiselectId:Array=[]；
kendoSelectedItems:Array=[]；
PropertyType=PropertyType；
MessageType=MessageType；
newItem:any={rowProperties:{editMode:false}，记录：undefined}；
ISORTING：布尔型；
折叠=假；
多选分隔符='；'；
搜索参数={
标准：[]，
高级条件：“”
};
public checkboxOnly=false；
公共模式='多个'；
公共选举：编号[]=[]；
public-selectAllState:SelectAllCheckboxState='unchecked'；
公共kendoGridPageDataSkip=0；
公共页面大小选项=[]；
公共过滤器：任何；
建造师(
私有listService:listService，
私人标签服务：标签服务，
私人助手：EntityListHelper，
私有表单生成器：表单生成器）{
}
恩戈尼尼特（）{
这是setupBase（）；
if（this.options.displayPageSizeSelector）{
this.pageSizeOptions=[5,20,50,100200]；
}
}
ngOnChanges（）{
this.multiselectId=[]；
this.selectedAllPages=[]；
this.kendoSelectedItems=[]；
this.selectedView=this.helper.getSelectedView（this.options）；
this.options.formLayout=this.selectedView？this.selectedView.formLayout:空；
这是setupBase（）；
}
专用设置库（）{
if（this.options.actions）{
this.inlineAddAction=this.options.actions.find（action=>action.action==='inlineAdd'）；
this.inlineEditAction=this.options.actions.find（action=>action.action==='inlineEdit'）；
this.multiAddAction=this.options.actions.find（action=>action.action==='newFromLookup'）；
}
if（this.multiSelectIds.length==0）{
this.selectAllState='unchecked'；
}
}
getCount（）：数字{
if（this.options.records）{
返回this.options.totalCount；
}
返回0；
}
isReadOnly（）{
返回this.options.readOnly | | this.formReadOnly；
}
hasCheckbox（）：布尔值{
如果（this.options.actions&&
this.options.actions.length>0&！this.options.disableRowSelector）{
返回true；
}否则{
返回false；
}
}
行单击（项目）{
if（此.multiSelectField）{
此.updateMultiSelectItems（项目）；
返回；
}else如果（！this.options.rowClickAction）{
返回；
}else if（this.options.rowClickAction.action.toLowerCase（）=='selectlookupvalue'）{
this.lookupSelectedEvent.emit（项）；
}
this.options.rowClickAction.actionFunction（项目）；
}
//多选逻辑
updateMultiSelectItems（项目）{
if（this.multiSelectIds.indexOf（item.record.id）=-1）{
此项。添加多选项（项目）；
}否则{
此项。删除MultiSelect（项目）；
}
this.multiSelectIdsEvent.emit（this.multiSelectIds）；
}
addMultiSelect（项目）{
如果（this.multiSelectValue！=''）{
this.multiSelectValue+=this.multiSelectSeparator+“”；
}
this.multiSelectValue+=item.record[this.multiSelectField]；
this.multiselectId.push（item.record.id）；
}
removeMultiSelect（项目）{
this.multiSelectValue=this.multiSelectValue.replace（item.record[this.multiSelectField]，“”）；
this.multiSelectValue=this.multiSelectValue.replace（this.multiSelectSeparator+''）；
this.multiSelectIds.splice（this.multiSelectIds.indexOf（item.record.id），1）；
if（this.selectedAllPages.indexOf（this.options.page）>=0）{
this.selectedAllPages.splice（this.selectedAllPages.indexOf（this.options.page））1；
}
}
multiSelectAllCurrentPage（）{
if（this.selectedAllPages.indexOf（this.options.page）=-1）{
这是塞勒
keyDownOnFilter(event: any) {
  if (event && (event.keyCode === 9 || event.keyCode === 13)) {
    this.filterGrid();
  }
}

filterGrid() {
  this.onListFilterSearch();
}