我已经检查过要通过Postman发送测试职位请求，并且工作正常。但是，当我将它们应用到Ionic3应用中时，它没有在HTML模板上显示JSON结果。这是我的代码供您参考：
buy-words.html
<!--
Generated template for the BuyWordsPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header></ion-header>
<ion-content class="buy-words">
<form class="form-create">
<div class="top-box">
<div class="div-img-shop">
<ion-icon class="img-shop" name="cube"></ion-icon>
</div>
<h2 class="shop-title">Shop</h2>
<!--<p class="desc">
You can also purchase these word packs starting at USD<span id="wc-rate">10</span>!
</p>-->
</div>
<div class="word-pack-list">
<h3 class="pack-title">Word Packs</h3>
<div class="desc-box">
<p class="desc">
You can also purchase these word packs starting at USD<span id="wc-rate">10</span>!
</p>
</div>
<!--<div *ngFor="let pack of packs" class="right-box">
<ion-item class="wp-list-item">
<ion-label class="wp-lbl">{{ pack.words }}</ion-label>
<ion-label class="wp-price">$ {{ pack.price }}</ion-label>
</ion-item>
</div>-->
<ion-slides pager="true" class="slide-wc">
<ion-slide *ngFor="let pack of packs">
<ion-item class="wp-list-item">
<p class="wp-lbl" stacked>{{ pack.words }}</p>
<p class="wp-words" stacked>Words</p>
<p class="wp-desc" stacked>{{ pack.description }}</p>
</ion-item>
<ion-label class="wp-price" stacked>Buy for $ {{ pack.price }}</ion-label>
</ion-slide>
</ion-slides>
</div>
</form>
</ion-content>
buy-words.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, ToastController } from 'ionic-angular';
import { ApiProvider } from '../../providers/api/api';
/**
* Generated class for the BuyWordsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-buy-words',
templateUrl: 'buy-words.html',
})
export class BuyWordsPage {
access_token = '';
token_type = '';
headers = {};
packs: Array<any> = [];
constructor(public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController,
public toast: ToastController,
public quickeApi: ApiProvider) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad BuyWordsPage');
}
ionViewWillEnter() {
this.token_type = this.quickeApi.getTokenType();
this.access_token = this.quickeApi.getAccessToken();
this.headers = {
'Authorization' : this.token_type + ' ' + this.access_token
}
var onSuccess = (response) => {
var result = JSON.parse(response.data);
// show alert if there is an error
if(result.errors.length !== 0)
{
this.alertCtrl.create({
title: 'ALERT',
subTitle: result.errors.join('. '),
buttons: ['Dismiss']
}).present();
return;
}
this.packs = [];
for(var i=0;i<result.length; i++)
{
this.packs.push(result[i]);
}
};
var onError = (error) => {
this.alertCtrl.create({
title: 'ALERT',
subTitle: error.error.toString(),
buttons: ['Dismiss']
}).present();
return;
};
this.quickeApi.listPacks(this.headers, onSuccess, onError);
}
}
api.ts
import { Injectable } from '@angular/core';
import { HTTP } from '@ionic-native/http';
/*
Generated class for the ApiProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class ApiProvider {
baseUrl = 'https://quickenow.com';
token_type = '';
accessToken = '';
client_id = <client_id here>;
client_secret = <client_secret here>;
deviceId = null;
constructor(public http: HTTP) {
// console.log('Hello ApiProvider Provider');
}
getClientId(){
return this.client_id;
}
getClientSecret(){
return this.client_secret;
}
setTokenType(value) {
this.token_type = value;
}
getTokenType() {
return this.token_type;
}
setAccessToken(value) {
this.accessToken = value;
}
getAccessToken() {
return this.accessToken;
}
login(data, onSuccess, onError) {
var url = this.baseUrl + '/api/oauth/login';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
logout(headers, onSuccess, onError) {
var url = this.baseUrl + '/api/oauth/logout';
this.http.post(url, {}, headers).then(onSuccess).catch(onError);
}
createOrder(data, headers, onSuccess, onError) {
var url = this.baseUrl + '/api/order/create';
this.http.post(url, data, headers).then(onSuccess).catch(onError);
}
pollOrder(data, onSuccess, onError) {
var url = this.baseUrl + '/api/poll-order';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
};
register(data, onSuccess, onError) {
var url = this.baseUrl + '/api/register';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
networkLogin(data, onSuccess, onError) {
var url = this.baseUrl + '/api/login-network';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
buyPacks(data, onSuccess, onError) {
var url = this.baseUrl + '/api/pack/buy';
this.http.post(url, data, {}).then(onSuccess).catch(onError);
}
listPacks(headers, onSuccess, onError) {
var url = this.baseUrl + '/api/pack/list';
this.http.post(url, {}, headers).then(onSuccess).catch(onError);
}
getCustomerInfo(headers, onSuccess, onError) {
var url = this.baseUrl + '/api/customer/info';
this.http.post(url, {}, headers).then(onSuccess).catch(onError);
}
}
答案 0 :(得分：0)
尝试这样。
无需推送和遍历结果。只需将响应分配给
packs数组。
listPacks(headers) {
var url = this.baseUrl + '/api/pack/list';
return this.http.post(url, {}, headers).map(resp=>{
return resp.json();
}).catch(onError);
}
this.quickeApi.listPacks(this.headers).subscribe(resp=>this.onSuccess(resp),
error=>{
console.log(error)
});
// Success Call back
onSuccess(resp){
if(resp!=null && resp.length > 0){
this.packs = resp;
}else{
this.packs = [];
}
}
让我知道是否有任何问题
答案 1 :(得分：0)
我刚刚删除了if(result.errors.length !== 0)行，因为发现JSON对象中不存在errors。
从此：
if(result.errors.length !== 0)
{
this.alertCtrl.create({
title: 'ALERT',
subTitle: result.errors.join('. '),
buttons: ['Dismiss']
}).present();
return;
}
对此：
this.alertCtrl.create({
title: 'ALERT',
subTitle: result.errors.join('. '),
buttons: ['Dismiss']
}).present();
return;