HTTP: Lokale Variable ist nach HTTP-Anforderung nicht definiert

Question

Bei http-Aufrufen möchte ich den eingehenden JSON einer lokalen Variablen in meiner Komponente zuweisen und sie in der Ansicht anzeigen.

Service:

getCases(){ 
    return this.http.get('someUrl') 
     .map((res: Response) => res.json()) 
} 

Komponente:

@Component({ 
    template: ` 
    <h1>Cases</h1> 
    <hr> 
    <br> 
    <table> 
     <tr *ngFor="let acase of cases" > 
      <td>{{acase.name}}</td> 
     </tr> 
    </table> 
    `, 
}) 

export class CaseListComponent implements OnInit { 

    //local variable, need to have use of this! 
    acase: Case; 
    cases: Case[]; 

    constructor(public _service: CaseService, public _route: ActivatedRoute) { 

    } 

    ngOnInit() { 
     this._service.getCases() 
      .subscribe(cases => this.cases = cases); 
     console.log(this.cases) // undefined!! 
    } 

    ngAfterContentInit() { 
     console.log("cases: ", this.cases) //undefined! 
    } 

} 

Answer 1

Sie zuweisen Fälle in der callback und die console.log wird, bevor Rückruf beendet laufen. daher wirst du undefiniert.

ngOnInit() { 
     this._service.getCases() 
      .subscribe(cases => { 
      this.cases = cases; 
      console.log(this.cases) // will print values... 
      }); 
     console.log(this.cases) // undefined!! 
    } 

Ähnlich ist Fall für ngAfterContentInit es vor Rückruf kehrt daher nicht definiert ausgeführt wird.

Hoffe das hilft !!

Answer 2

Sie könnten so:

this.http.get('someurl').map((res: Response) => res.json()).subscribe(res => this.result = res); 

Dank der Funktion Abonnieren Sie den Code ein, um das Ergebnis des asynchronen Anforderung reagiert und deserialisiert die zurück json in ein Objekt. Jetzt wird das zurückgegebene JSON-Objekt an die Ansicht gebunden.