eckig 2 * ngFor und Observables Object, keine Daten angezeigt

Question

Ich habe eine bestimmte Fragen bereits überprüft, aber immer noch nicht geschafft, mein Problem zu lösen. Ich bin ein Service in meiner app, die Observablen gibt, alles ist auf dieser Bühne in Ordnung, aber wenn ich die Daten angezeigt werden sollen, passiert nichts:

@Injectable() 
export class DataService { 

    private APIURL = 'http://api.dev/'; 

    constructor(private http: Http) { 
    } 

    _API_getEvents:string = this.APIURL + "getEvents"; 
    getEvents() : Observable<IEvent[]> { 
     return this.http.get(this._API_getEvents) 
     .map((res:Response) => res.json()) 
     .catch(this.handleError); 
    } 

    private handleError (error: Response | any) { 
     // In a real world app, we might use a remote logging infrastructure 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 


} 

Event-Schnittstelle:

export interface IEvent { 
    id: number; 
    name: string; 
    created_at:Date; 
    update_at:Date; 
} 

Und Komponente:

events:IEvent[]; 
//events:any[]; 

    constructor(private _http:Http, private _dataService: DataService) 
    { 
    this._dataService.getEvents() 
    .subscribe(

     function(response) { console.log("Success Response" + response); 

     this.events = response; 
     console.log('EVENTS: '); 
     console.log(this.events); 
     }, 
     function(error) { console.log("Error happened" + error)}, 
     function() { console.log("the subscription is completed")} 
    ); 
    } 

Wenn ich angezeigt werde versuchen, seine leer:

<ul *ngIf="events"> 
        <li *ngFor="let event of events"> 
         <a [routerLink]="['/gallery/', 'event1']"> 
          {{event.name}} 
         </a> 
        </li> 
... 

Was könnte das Problem sein?

Answer 1

Verwenden Sie Pfeilfunktionen. Ohne sie ist this nicht auf die Komponenteninstanz in Ihrer Calback Funktion gebunden:

.subscribe(response => { 
    console.log("Success Response" + response); 
    this.events = response; 
}, 
...