卡在 httpModule 和 Promise 模块中

Question

我阅读了本教程https://angular.io/docs/ts/latest/tutorial/toh-pt6.html。我决定构建一些完全相似的东西，但用于支持票而不是英雄。

我有一个 TicketService 从 php 文件中获取 JSON。

TicketService的代码就是这样

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"}]

我的Ticketclass很简单。这是

的代码

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)

这意味着您在 Service 中处理了 then，然后在第二个结果中您将得到 null，因为它是在第一个中处理的。同样在您 response.json() 之后，它是您的实际 json 响应，因此没有数据。

您可以通过多种方式修复它

Return 价值 承诺：

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()

或者更好这里不是用户承诺，只是你期望的用户 Observable：

服务

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();
    }

}

卡在 httpModule 和 Promise 模块中

Got stuck in httpModule and Promise module

angular-http

angular