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()，它仍然未定义。我不知道我做错了什么。

PHP的JSON输出就是这个

[{"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()

或者更好非用户承诺，只需按照您的预期用户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模块

1 个答案: