Question

我正在从Ionic 3升级到4，并不断遇到我的API服务问题。在这种特殊情况下，我试图检索用户的票证，以便我可以列出它们。

不幸的是，即使每次从API成功获取票证，每次执行此操作都会收到“ whoops”错误消息。最重要的是，我似乎无法弄清楚如何将服务返回的票证成功地放入我的页面。我目前遇到一个Cannot read property 'then' of undefined错误。

最重要的是，data现在又回到了data: [object Object],[object Object]

ticket.service

getSubmittedTickets() {
    let body = new FormData();
    body.append('username', this.username);
    body.append('password', this.password);
    this.http
        .post(this.apiService.url, body)
        .subscribe((data: any) => {
            console.log('data: ' + data);
            return data;
        }, error => {
            console.log('whoops');
        });
}

ticket.ts

ngOnInit() {
    this.getSubmittedTickets();
}

getSubmittedTickets() {
    this.ticketService.getSubmittedTickets()
    .then(data => {
        this.tickets = data;
        console.log('tickets: '+this.tickets);
    });
}

Answer 1

您服务中的方法名称为getTickets()。但是在您的TS文件中，您使用了getSubmittedTickets()。

TS文件中的代码应为：

getSubmittedTickets() {
    this.ticketService.getTickets()
    .then(data => {
        this.tickets = data;
        console.log('tickets: '+this.tickets);
    });
}

Answer 2

您需要使用toPromise将observable转换为promise

getSubmittedTickets() {
    let body = new FormData();
    body.append('username', this.username);
    body.append('password', this.password);
    return this.http
        .post(this.apiService.url, body)
        .toPromise()
}

Answer 3

该服务应返回一个Observable

getSubmittedTickets() {
    let body = new FormData();
    body.append('username', this.username);
    body.append('password', this.password);
    return this.http.post(this.apiService.url, body);      
}

，组件从服务中调用方法，然后订阅返回的值

getSubmittedTickets() {
    this.ticketService.getSubmittedTickets()
    .subscribe(data => {
        this.tickets = data;
        console.log('tickets: '+this.tickets);
    });
}

为什么在Ionic 4中无法从API服务返回数据？

ticket.service

ticket.ts

3 个答案: