Visualizzazione dei risultati da 1 a 1 su 1
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94

    Angular5: errore se aggiungo splice() dentro map operator

    Ciao, sono nuovo nel mondo di Angular e finora mi sono limitato a leggere la guida ufficiale + molti videotutorial su youtube. Per sporcarmi le mani ho creato una semplice app in angular e (per far qualcosa un attimo più concreta) volevo sfruttare le rest api di wp per recuperare dei contenuti che attraverso il modulo http nel service poi uso nel template.





    Nel component prima uso la funzione map (perchè voglio trasformare i dati che mi giungono in un array di oggetti cosi che dopo mi è facile ciclare nel *ngFor) e poi faccio il subscribe.





    In map() oltre a lavorare sui dati che arrivano da wp ho inserito anche dei dati che prendo dal service del tipo:




    let parametri = this.myService.parametri; (è un array di oggetti).




    All'interno di map c'è la riga di codice incriminata parametri.splice(0, 1); in quanto se la tolgo vedo che in console ho i dati nella forma che voglio io (array di oggetti) mentre se la lascio (ed è quello che dovrei fare) esce un errore di angular:




    TypeError: Cannot read property 'id' of undefined

    Questo il codice

    codice HTML:
    ngOnInit() { this.WorkSkillDataService.getWorks()        
       .map(data => {
    
              let myData = data['acf'];          
              let nObj:any = {};
              let myArr = [];          
              let patternMansione = /^mansione/i;          
              let patternPeriodo = /^periodo/i;          
              let patternDettagli = /^dettagli/i;          
              let new_prop;          
              let parametri:any[] = this.WorkSkillDataService.parametri;
                                    
              while(Object.keys(myData).length > 1){              
                for(let prop in myData){                
                  if(Object.keys(nObj).length < 5){                  
                    if(prop.match(patternMansione)){                    
                      new_prop = 'mansione';                  
                    } else if(prop.match(patternPeriodo)){                    
                      new_prop = 'periodo';                  
                    } else if(prop.match(patternDettagli)){
                        new_prop = 'dettagli';                  
                    }                                    
            
                   nObj[new_prop] = myData[prop];                  
                   delete myData[prop];                                                      
                   nObj.id = parametri[0].id;                  
                   nObj.background = parametri[0].background;                  
                   parametri.splice(0, 1);                  
                   
                   // console.log(this.parametri);                                                     
                   // nObj[prop] = myData[prop];                 
                   // delete myData[prop];                
    
                 } else {                  
    
                   // console.log(nObj)                 
                   myArr.push(nObj);
                   // console.log(myArr);                  
                   nObj = {};                  
                   console.log("finished");                                  
    
                 }              
               }            
             }           
            
             // this.parametri.splice(0, 1);            
             console.log(parametri);            
             console.log(myArr);            
             return myArr;        
          })        
         .subscribe((res) => {             
            // console.log(res);            
            this.lavori = res;            
            console.log(this.lavori);          
           },          
           error => console.log(error) // error path
           );    
    
           console.log(this.slideClasses);    this.tacca();      
      }
    In pratica se lascio la riga incriminata parte l'errore (quello dentro al subscribe) e il tutto si blocca.

    Se invece la tolgo dalla console vedo che i dati sono nel formato che voglio io tranne per il fatto che id e background avranno gli stessi valori per tutti gli oggetti cosa sbagliata.

    Cercando relativamente all'errore su stackoverflow ho letto che potrebbe essere dovuto al fatto che il template cerca di stampare ancor prima che i dati siano disponibili e dicevano di usare async pipe... ho provato a fare come dicevano ma l'errore persiste...
    Ultima modifica di Floky; 23-03-2018 a 17:42

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.