为什么我不能 return 来自 Ionic 4 中 API 服务的数据？

Question

我正在从 Ionic 3 升级到 4，我的 API 服务一直遇到问题。在这个特定的例子中，我正在尝试检索用户的票证，以便我可以列出它们。

不幸的是，每次我这样做都会收到 'whoops' 错误消息，即使从 API 中成功获取了票证也是如此。最重要的是，我似乎无法弄清楚如何成功地将服务返回的票证放入我的页面；我目前遇到 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

服务应该 return 一个 Observable

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

并且组件从服务中调用方法，然后订阅 returned 值

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

为什么我不能 return 来自 Ionic 4 中 API 服务的数据？

Why can't I return data from an API service in Ionic 4?

ionic-framework

angular

ionic4

ticket.service

ticket.ts