Застрял в модуле httpModule и Promise

Question

Я прочитал этот урок https://angular.io/docs/ts/latest/tutorial/toh-pt6.html. Я решил построить нечто совершенно похожее, но для поддержки билетов вместо heros.

У меня есть TicketService, который получает JSON из файла php.

Код Услуги по продаже билетов, просто это

export class TicketService { 

private headers  = new Headers({'Content-Type': 'application/json'}); 
private ticketsUrl = 'http://localhost/json.php'; // URL to web api 

// constructor so that we can get instance of http 
constructor(private http: Http) { } 


getTickets() : Promise<Ticket[]> { 
    return this.http.get(this.ticketsUrl) 
      .toPromise() 
      .then(response => response.json().data as Ticket[]) 
      .catch(this.handleError) 
} 

getTicket(id: number): Promise<Ticket> { 
    console.log('TicketService getTicket() called: TicketID '+id); 
     const url = `${this.ticketsUrl}?${id}`; 

    return this.http.get(url) 
     .toPromise() 
     .then(response => response.json().data as Ticket) 
     .catch(this.handleError); 
} 

Мои TicketSystemComponent называет услугу, чтобы получить билеты. Но даже если я печатаю билеты в консоли они не определены

export class TicketSystemComponent implements OnInit { 

    // declare and initialise to empty array 
    tickets : Ticket[] = []; 

    // This is the only way to get instance of the service 
    // https://angular.io/docs/ts/latest/tutorial/toh-pt4.html [Dependency Injection] 
    constructor(private ticketService: TicketService) { 
    } 

    getTickets() : void { 
    console.log('TicketSystemComponent get getTicket()'); 

    // This line tells that once Service Promise is fullfilled, assigned their tickets to our tickets array 
    this.ticketService.getTickets().then(tickets => this.tickets = tickets); 

    setTimeout (function() { 
     console.log(this.tickets); 
    }, 1000); 
    } 


    ngOnInit() { 

    // We dont call anything slow in constructor. Constructor is not for heavy lifting 
    // Get tickets that are already created 
    this.getTickets(); 
    } 

} 

Пожалуйста, проверьте setTimeout(), она до сих пор неопределенную. Я не знаю, где я поступаю неправильно.

JSON выход из PHP просто это

[{"category":"Script Support","topic":"Sample Topic 1","url":"http:\/\/www.google.com","details":"the quick brown fox jumps over the lazy dog.","fileScreenshot":"none","ticketId":1000,"createdBy":"John"},{"category":"Script Support","topic":"Sample Topic 2","url":"http:\/\/www.google.com","details":"the quick brown fox jumps over the lazy dog.","fileScreenshot":"none","ticketId":1001,"createdBy":"John"},{"category":"Script Support","topic":"Sample Topic 3","url":"http:\/\/www.google.com","details":"the quick brown fox jumps over the lazy dog.","fileScreenshot":"none","ticketId":1002,"createdBy":"John"}] 

Мой Ticket класс очень просто. Это код

export class Ticket { 
    category  :String; 
    topic   :String; 
    url    :String; 
    details   :String; 
    fileScreenshot :String; 

    ticketStamp  :number; 
    ticketId  :number; 
    createdBy  :String; 

} 

Answer 1

Ваша проблема заключается в том, что в процессе эксплуатации вы не возвращаете Право обещание

return this.http.get(this.ticketsUrl) 
      .toPromise() 
      .then(response => response.json().data as Ticket[]) 
      .catch(this.handleError) 

это означает, что вы справляетесь then в вашем Service и второй, то в результате вы получите null, поскольку он был обработан в первом. Также в вашем после response.json() его фактический ответ json, поэтому нет данных.

Вы можете это исправить несколькими способами

Возвращаемое значение обещанию:

return this.http.get(this.ticketsUrl) 
       .toPromise() 
       .then(response => return response.json() as Ticket[]) 
       .catch(this.handleError) 

Перегруппировка звонки

return this.http.get(this.ticketsUrl) 
      .map(response => response.json() as Ticket[]) 
      .catch(this.handleError) 
      .toPromise() 

Или лучше не пользователь обещает здесь, просто пользователь Наблюдается, когда вы ехр ected к:

службы

import 'rxjs/add/operator/catch'; 

export class TicketService { 

    private headers  = new Headers({'Content-Type': 'application/json'}); 
    private ticketsUrl = 'http://localhost/json.php'; // URL to web api 

    // constructor so that we can get instance of http 
    constructor(private http: Http) { } 


    getTickets() : Observable<Ticket[]> { 
     return this.http.get(this.ticketsUrl) 
       .map(response => response.json() as Ticket[]) 
       .catch(this.handleError) 
    } 

    getTicket(id: number): Observable<Ticket> { 
     console.log('TicketService getTicket() called: TicketID '+id); 
      const url = `${this.ticketsUrl}?${id}`; 

     return this.http.get(url) 
      .map(response => response.json() as Ticket) 
      .catch(this.handleError); 
    } 
} 

Компонент

export class TicketSystemComponent implements OnInit { 

    // declare and initialise to empty array 
    tickets : Ticket[] = []; 

    // This is the only way to get instance of the service 
    // https://angular.io/docs/ts/latest/tutorial/toh-pt4.html [Dependency Injection] 
    constructor(private ticketService: TicketService) { 
    } 

    getTickets() : void { 
    console.log('TicketSystemComponent get getTicket()'); 

    // This line tells that once Service Promise is fullfilled, assigned their tickets to our tickets array 
    this.ticketService.getTickets().subscribe(tickets => this.tickets = tickets); 

    setTimeout(() => { 
     console.log(this.tickets); 
    }, 1000); 
    } 


    ngOnInit() { 

    // We dont call anything slow in constructor. Constructor is not for heavy lifting 
    // Get tickets that are already created 
    this.getTickets(); 
    } 

}