Question

我已经检查过要通过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);
    }
}

Answer 1

尝试这样。

无需推送和遍历结果。只需将响应分配给 packs数组。

api.ts

    listPacks(headers) {
            var url = this.baseUrl + '/api/pack/list';
            return this.http.post(url, {}, headers).map(resp=>{
               return resp.json();
           }).catch(onError);
     }

buy-words.ts

    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 = []; 
      }
   }

让我知道是否有任何问题

Answer 2

我刚刚删除了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;

http发布请求未响应

2 个答案:

api.ts

buy-words.ts