本文介绍了如何在角度2中同步两个onloadend函数?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是Angular 2/4的新手,并且到达了可以从本地目录读取多个文件的地方.在我的函数中,数据(来自每个文件)被解析并推入2个不同的数组,但是在onloadend函数之后,我无法访问数组数据,并且我认为这是一个同步问题.

I'm new to Angular 2/4 and I've reached a place that I can read multiple files from local directory. In my function, data (from each file) is parsed and pushed into 2 different arrays but after onloadend functions I can't access arrays data and I suppose this is a synchronization problem.

我的代码:

changeListener($event: any) {
       this.readFile($event.target);
    }
readFile(input: any) {
  var self = this;
  var files : File [] = input.files;
  var employeeSet : Employee [] = new Array<Employee>();
  var serviceSet : Service [] = new Array<Service>();
  for (let i=0; i < files.length; i++) {
            console.log(files[i].name);

            if (files[i].name == 'employees') {
              var employeeReader : FileReader = new FileReader();
              employeeReader.readAsText(files[i]);

              employeeReader.onload = function(e) {
              var alldata = employeeReader.result;
              var allTextlines = alldata.split(/\r?\n/);

              for (var i=0; i < allTextlines.length; i++) {
                var columns = allTextlines[i].split('|');
                var employee : Employee = new Employee();
                if (columns[0] != '') {
                  employee.id = Number(columns[0]);
                  employee.firstName = columns[1];
                  employee.lastName = columns[2];
                  employee.jobPosition = columns[3];
                  employee.status = columns[4];
                  employee.company.name = columns[5];
                  employee.mobilePhone = columns[6];
                  employee.iternalNumber = columns[7];
                  employee.email = columns[8];
                  employee.hireDate = columns[9];
                  var totalServices = columns[10].split(',');
                  for (var j = 0; j < totalServices.length; j++) {
                    var serviceDescr = totalServices[j];
                    employee.services.push(serviceDescr);
                  }

                  employeeSet.push(employee);



                }
                // self.apiServ.addUser(user).subscribe(
                //   (data) => {
                //     if( data instanceof Observable) {
                //       data.subscribe(
                //         (f) => {console.log(f);
                //         });
                //     }
                //   }
                // );
              }
              console.log(employeeSet);
              self.complete.next(employeeSet);
              // console.log('Tha steiloume ston server to akoloutho array: \n', resultSet);
            };
          } else if(files[i].name == 'services') {

            var serviceReader : FileReader =  new FileReader();
            serviceReader.readAsText(files[i]);

            serviceReader.onload = function(e) {
            var alldata = serviceReader.result;
            var allTextlines = alldata.split(/\r?\n/);
            for (var i=0; i < allTextlines.length; i++) {
              var columns = allTextlines[i].split('|');
              var service : Service = new Service();
              if (columns[0] != '') {
                service.id = Number(columns[0]);
                service.description = columns[1];
                service.price = columns[2];
                service.cost = columns[3];

                serviceSet.push(service);


              }
            }
            console.log(serviceSet);
            self.complete.next(serviceSet);
          };



  }




}



// Here I want to access the data but i cant.




}

有帮助吗?预先感谢!

推荐答案

我在Promises上实现了类似的功能(它仍然是异步的,但是可以更好地处理它).您应该可以在then方法中使用数组.

I achieve something similar working with Promises (it remains being async but in a better way to handle it). You should be able to work with your arrays inside the then method.

ImageHelper.ts

ImageHelper.ts

export class ImageInfo {

  name: string;
  size: number;
  width: number;
  height: number;

}

export class ImageHelper {

  static getImageInfo(image: File): Promise<ImageInfo> {

    const imageInfo: ImageInfo = new ImageInfo();

    return new Promise<ImageInfo>((resolve, reject) => {

      try {

        imageInfo.name = image.name;
        imageInfo.size = image.size;

        const reader = new FileReader();

        reader.onloadend = (onLoadEvent) => {

          const imageAux = new Image();
          imageAux.src = reader.result;

          imageAux.onload = function () {

            imageInfo.width = imageAux.width;
            imageInfo.height = imageAux.height;

            resolve(imageInfo);
          };
        };
        reader.readAsDataURL(image);
      } catch (error) {

        reject(error);
      }
    });
  }

}

以及任何地方.

principalUpload(event) {

  ImageHelper.getImageInfo(event.target.files[0])
    .then((imageInfo: ImageInfo) => console.log(imageInfo));
  ...
}

我希望这能帮助更多人.

I hope this help someone more.

这篇关于如何在角度2中同步两个onloadend函数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 06:10
查看更多