Fehler, um Werte in Array nach dem Drücken eines neuen Elements

Question

jemand weiß, wie ich es lösen? Ich habe ein Element meiner Array mit der Push-Funktion und versuchte dann an der Position des Arrays zuzugreifen 3, die mit dem Element hinzugefügt wurde aber als nicht definiert

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]); 



} 

Answer 1

Sie von Asynchronität betrogen zu werden. Wo Sie zuvor die editeImage-Funktion aufgerufen haben, konnten Sie nicht garantieren, dass die erforderlichen Daten geladen wurden. Sie können Ihre editeImage-Funktion innerhalb der onloadend-Methode aufrufen, um sicherzustellen, dass Sie über Daten verfügen, mit denen Sie arbeiten können.

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]); 
}