angular - 数据上传表单excel表时分页不起作用

Question

我的项目需要帮助。我已经上传了数据（excel文件）。有201个数据。所有数据都加载在一个页面中。但我需要分页。寻呼部分我已经完成了，但它不起作用。你能帮我吗？

this is my ts file look like :-

export class UploadEquipmentComponent implements OnInit, OnDestroy {

  girdData: GridDataResult;
  equipmentList: Equipment[] = [];
  pager: GridPager = new GridPager();
  skip: number = 0;
  inventoryLocationData: Array<InventoryLocation>;
  selectableSettings: GridSelectionSettings = new GridSelectionSettings(
    'cylinderId'
  );
  selectedFile: any;
  inventoryId: { name: string, id: number };
  paginationData: BaseSearchData = new BaseSearchData();
  isDisableUpdateBtn: boolean;

  public defaultItemInventoryLocation: { name: string, id: number };
  public hiddenColumns: Array<string> = new Array<string>();
  destroySubject$: Subject<void> = new Subject();

  constructor(private orderCommonService: OrderCommonService,
    private messagesService: MessagesService, private translate: TranslateItemService,
    private assetManagementService: AssetManagementService,
    private localStorageService: LocalStorageService,private metaDataService: MetaDataService,
    private warehouseService: WarehouseService) { }

  ngOnInit() {
    this.loadDropDownData();
    this.hideColumns();
    this.isDisableUpdateBtn = true;
    this.skip=0;
    this.paginationData.pageNo=1;
  }

  private async loadDropDownData() {
    try {
      this.inventoryLocationData = await this.warehouseService.getInventoryLocations();
      const selectedLanguage = await this.localStorageService.getLocalStorage(CommonConstant.localStorageKey.language);

      if (selectedLanguage && selectedLanguage === CommonConstant.language.japanese) {
        this.defaultItemInventoryLocation = { name: '保管場所を選択してください', id: 0 };
      } else {
        this.defaultItemInventoryLocation = { name: 'Select Inventory Location', id: 0 };
      }
    } catch (error) {
      this.messagesService.showErrorMessage(error.error.message);
    }
  }

  public async inventoryLocationChanged(e: any) {
    if ((this.inventoryId && this.inventoryId.id > 0) && (this.onSelectFile && this.onSelectFile.length > 1)) {
      this.validateEquipment();
    }
  }

  public async onSelectFile(event: any) {

    if (event.files && event.files[0]) {
      if (event.files[0].extension === '.xls' || event.files[0].extension === '.xlsx') {
        this.selectedFile = event.files[0].rawFile;
        const reader = new FileReader();

        reader.onload = (e: any) => {
         
          this.validateEquipment();
        };
        reader.readAsDataURL(this.selectedFile);
      } else {
        const mes = this.translate.getTranslateMessageValue('commonMessages.errors.fileTypeInvalid');
        event.files[0] = null;
        this.messagesService.showInfoMessage(mes);
      }
    }
  }

  public onClickFileUpload(e) {
    if (this.inventoryId === undefined || (this.inventoryId && this.inventoryId.id === 0)) {
      const mes = this.translate.getTranslateMessageValue('commonMessages.errors.inventoryRequired');
      this.messagesService.showInfoMessage(mes);
      return false;
    }
  }

  public async removeSelected(event: any) {
    if (event.files && event.files[0]) {
      this.selectedFile = null;
      this.isDisableUpdateBtn = true;
    }
  }

  public async pageChanged(pageChangeArg: PageChangeEvent) {
    this.skip = pageChangeArg.skip;
    this.paginationData.pageNo = pageChangeArg.skip / this.paginationData.pageSize + 1;
    this.girdData = {
      data: this.equipmentList.slice(this.skip, this.skip + this.paginationData.pageSize),
      total: this.equipmentList.length
    };
  }

  private makeUploadModel(): any {
    if (this.inventoryId && this.inventoryId.id > 0) {
      if (this.selectedFile && this.selectedFile.name.length > 0) {
        const formData = new FormData();
        formData.append('file', this.selectedFile, this.selectedFile.name);
        return formData;
      } else {
        const mes = this.translate.getTranslateMessageValue('commonMessages.errors.fileRequired');
        this.messagesService.showInfoMessage(mes);
        return false;
      }
    } else {
      const mes = this.translate.getTranslateMessageValue('commonMessages.errors.inventoryRequired');
      this.messagesService.showInfoMessage(mes);
      return false;
    }
  }

  public async uploadEquipment() {
    const uploadingModel = this.makeUploadModel();
    if (uploadingModel) {
      await this.assetManagementService.uploadEquipments(uploadingModel, this.inventoryId.id).then((result) => {
        if (result) {
          if (!result.hasError) {
            this.girdData = {
              data: result.data,
              total: result.recordCount
            };
            const mes = this.translate.getTranslateMessageValue('commonMessages.success.uploadSuccess');
            this.messagesService.showSaveSuccessMessage(mes);
          } else {
            if (result.errorMessage === CommonConstant.apiResultMessageCode.uploadFailed) {
              const mes = this.translate.getTranslateMessageValue('commonMessages.errors.uploadFailed');
              this.messagesService.showErrorMessage(mes);
            }
          }
        }
      }).catch(err => this.messagesService.showErrorMessage(err.error.message));
    }
  }

  private async validateEquipment() {
    const uploadingModel = this.makeUploadModel();
    if (uploadingModel) {
      await this.assetManagementService.validateEquipments(uploadingModel, this.inventoryId.id).then((result) => {
        if (result) {
          if (!result.hasError) {
            this.girdData = {
              data: result.data,
              total: result.recordCount
            };
            this.isDisableUpdateBtn = false;
          } else {
            if (result.errorMessage === CommonConstant.apiResultMessageCode.invalidData) {
              const mes = this.translate.getTranslateMessageValue('commonMessages.errors.validateError');
              this.messagesService.showErrorMessage(mes);
            }
            this.isDisableUpdateBtn = true;
          }
        }
      }).catch(err => this.messagesService.showErrorMessage(err.error.message));
    }
  }

<kendo-grid class="asset-history-grid mx-2" [data]="girdData" [pageSize]="paginationData.pageSize"
      [pageable]="pager"  (pageChange)="pageChanged($event)" [skip]="skip"  [resizable]="true"
      [pageSize]="paginationData.pageSize" [selectable]="selectableSettings"
      [kendoGridSelectBy]="selectableSettings.rowSelectBy" [selectedKeys]="selectableSettings.keys" >
      <kendo-grid-column field="productNo" width="110" *ngIf="!isHidden('productNo')">
        <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
          <span>{{ 'asset.uploadEquipment.grid.productNo' | translate }}</span>
        </ng-template>
      </kendo-grid-column>
      .....and so on

这是我的 html 文件的样子。我做错了什么，请帮助我

标签： angularkendo-grid

Answer 1

当您在 gridData 中绑定数据时，更改以下代码

this.girdData = {
    data: result.data.slice(this.skip, this.skip + this.paginationData.pageSize),
    total: result.recordCount
};