在推送新元素后获取数组中的值时出错

时间:2017-10-24 19:03:13

标签: javascript arrays json angular typescript

谁知道我怎么解决它? 我使用push函数向我的数组添加了一个元素,然后尝试访问添加到元素但未定义的位置3的数组

   readThis(inputValue: any): void {
    this.contImage = inputValue.files.length;
    for (var i = 0; i < inputValue.files.length; i++) {
        let file: File = inputValue.files[i];
        let myReader: FileReader = new FileReader();
        myReader.onloadend = (e) => {
            if(file.size <= 4000000){
                this.imageValues.push(myReader.result);
            }else{
                swal(
                    'Ops! Imagem muito grande',
                    'Algumas imagens não puderam ser enviados pois excede o tamanho maximo de 5 Megas :/',
                    'error'
                );
            }


        }
        myReader.readAsDataURL(file);

    }

    this.editeImage();





}

editeImage(){

    console.log(this.imageValues[3]);



}

1 个答案:

答案 0 :(得分:0)

你被异步性所欺骗。您之前调用editeImage函数的位置,您无法保证必要的数据已完成加载。您可以在editeImage方法中调用onloadend函数,以确保您可以使用数据。

readThis(inputValue: any): void {
  this.contImage = inputValue.files.length;
  for (var i = 0; i < inputValue.files.length; i++) {
    let file: File = inputValue.files[i];
    let myReader: FileReader = new FileReader();
    myReader.onloadend = (e) => {
      if(file.size <= 4000000){
        this.imageValues.push(myReader.result);
        if(this.imageValues.length === 4) this.editeImage();
      }else{
        swal(
          'Ops! Imagem muito grande',
          'Algumas imagens não puderam ser enviados pois excede o tamanho maximo de 5 Megas :/',
          'error'
        );
      }
    }
    myReader.readAsDataURL(file);

  }

}

editeImage(){ 
    console.log(this.imageValues[3]); 
}