Angular 4 Rückgabewert in undefined

Question

Dies ist mein aktueller Code. Wie kann ich in diesem Fall den rowData-Wert zurückgeben?

Ich hatte versucht, rowData vor der Rückkehr zu trösten, und es gab mir undefine.

Answer 1

Ihre Methode sollte ein Versprechen der transformierten Daten zurückgeben. Im letzten Callback sollten Sie die transformierte Antwort zurückgeben. Sie können sich auf die implizite Rückkehr der Pfeilfunktion verlassen, um das zu tun. Sie benötigen die Variable rowData nicht, weil array.proptype.map ein neues Array zurückgibt, in dem jeder Wert transformiert ist. Alles, was Sie tun müssen, ist:

private createRowData() { 
    return this.http // Return the promise 
    .get(`/assets/json/payment.json`) 
    .toPromise() 
    .then(response => response.json()) 
    .then(data => data.items.map(elem => ({ // Return the transformed data by the then callback 
     id: elem.id, 
     total_amount: elem.total_amount, 
     status: elem.status, 
     sent: elem.sent, 
    }))); 
} 

Dann können Sie diese Methode verwenden, wie unten:

this.createRowData().then(rowData => console.log(rowData)) 

Answer 2

Sie sind ein asynchronen http Anruf. Der Aufruf ist unvollständig, wenn die Zeile return rowData; ausgeführt wird und Sie daher undefiniert erhalten. Um dies zu beheben, geben Sie eine Zusage von Ihrer Funktion zurück und verwenden Sie einen Aufruf, um rowData von wo immer Sie Ihre Funktion aufrufen.

private createRowData() { 
    const rowData: any[] = []; 

    return this.http // <- Return promise 
    .get(`/assets/json/payment.json`) 
    .toPromise() 
    .then(response => response.json()) 
    .then(data => { 
    data.items.map(elem => { 
     rowData.push({ 
     id: elem.id, 
     total_amount: elem.total_amount, 
     status: elem.status, 
     sent: elem.sent 
     }); 
     return rowData; 
    }); 
    }); 
//return rowData; // <- This is undefined because the call isn't complete yet 
} 

ngOnInit() { 
    this.createRowData().then(data => { 
    console.log(data) // <- rowData 
    }); 
}