Question

我正在尝试制作产品网格，但在进行异步调用以从服务器获取产品后，我无法加载其图像。

<ion-content padding>
<ion-grid>
    <ion-row *ngFor="let i of rows">
        <ion-col *ngFor="let product of products | slice:(i*2):(i+1)*2" width-50>
            <ion-row>
                <ion-img width="150" height="150" src="assets/img/eastereggs/placeholder.png"></ion-img>
            </ion-row>
            <ion-row>
                {{product.displayName}}
            </ion-row>
            <ion-row>
                <ion-col>
                preço:{{product.price}} 
                </ion-col>
                <ion-col class="quantity">
                    <div class="add-product" [hidden]="product.quantity!=0">
                        <ion-icon name="add" item-right></ion-icon> 
                    </div>
                    <div class="set-quantity" [hidden]="product.quantity==0">
                        <ion-icon name="arrow-dropleft" item-right></ion-icon> 
                        {{product.quantity}}
                        <ion-icon name="arrow-dropright" item-right></ion-icon> 
                    </div>
                </ion-col>
            </ion-row>
        </ion-col>
    </ion-row>
</ion-grid>

但是，如果加载它而不等待异步调用

<ion-row *ngFor="let i of [1,2,3]">
        <ion-col *ngFor="let product of [1,2,3,4,5,6] | slice:(i*2):(i+1)*2" width-50>
            <ion-row>
                <ion-img width="150" height="150" src="assets/img/eastereggs/placeholder.png"></ion-img>
            </ion-row>
            <ion-row>
                name
            </ion-row>
            <ion-row>
                <ion-col>
                price 
                </ion-col>
                <ion-col class="quantity">
                    <div class="add-product" [hidden]="product.quantity!=0">
                        <ion-icon name="add" item-right></ion-icon> 
                    </div>
                    <div class="set-quantity" [hidden]="product.quantity==0">
                        <ion-icon name="arrow-dropleft" item-right></ion-icon> 
                        0
                        <ion-icon name="arrow-dropright" item-right></ion-icon> 
                    </div>
                </ion-col>
            </ion-row>
        </ion-col>
    </ion-row>

最后，为了获得产品，我创建了以下承诺

public getProducts(subcategoryId) {

    let qs = new URLSearchParams();
    qs.append('subcategoryId', subcategoryId);

    let requestOptions = new RequestOptions();
    requestOptions.search = qs;


    // don't have the data yet
    return new Promise(resolve => {
        this.http.get(path, requestOptions)
        .map(res => res.json())
        .subscribe(data => {
            resolve(data);
        });
    });
}

然后我在另一个部分处理这些数据，我创建了产品数组，我认为它不相关，但如果有人认为问题可能在哪里，我可以在这里发帖。

我一直在寻找类似的帖子，但大多数人都使用了错误的路径，但我认为不是这样，因为我已经确定它可以在没有异步调用的情况下工作。

Answer 1

我有类似的问题，我的猜测是异步调用进入超时，然后没有加载图像资源，显示失败。如果图像值为“null”或“未定义”以处理它，我必须管理该案例并实现展示案例。

为了确定这是否是导致错误的超时，你可以激发我自己作为“Angular2服务/提供者”使用的类来完成我对服务器的所有调用。它管理超时事件。您需要使用：import { Observable } from 'rxjs/Observable';，import 'rxjs/add/operator/timeoutWith';，import 'rxjs/add/observable/throw';。

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions, RequestMethod, Request } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/timeoutWith';
import 'rxjs/add/observable/throw';


@Injectable()
export class CustomHttpService {

    private static readonly CLASS_TAG:string = "CustomHttpService";
    public static readonly ERROR_REQ_HTTP = "error_req_http"; 
    public static readonly TIMEOUT_ERROR_REQ_HTTP = "timeout_error_req_http"; 

    private static readonly TIMEOUT_DELAY = 3000;


    readonly url:string =  [your url string];

    constructor(public http:Http){}


    public sendRequest = (data):Observable<Response> | Observable<any> => {
        let headersToUse = new Headers();
        headersToUse.append("Content-type",'application/x-www-form-urlencoded');

        let options = { headers:headersToUse };

        return this.http.post(this.url, data, options).timeoutWith(CustomHttpService.TIMEOUT_DELAY,Observable.throw(new Error(CustomHttpService.TIMEOUT_ERROR_REQ_HTTP))).map(
            (res:Response)=>{
");
                return res;
            }
        )
        .catch(this.handleErrorObservable);
    }

    private handleErrorObservable (error:Response|any){
        console.error(CustomHttpService.CLASS_TAG + " handlerErrorObservable: error " + error);

        let resError;
        if(error!= undefined && error.hasOwnProperty('message') && error['message']!=CustomHttpService.TIMEOUT_ERROR_REQ_HTTP && error['message']==CustomHttpService.ERROR_REQ_HTTP ){
            resError = error.message; 
        } else {
            resError = CustomHttpService.ERROR_REQ_HTTP;
        }
        return Observable.throw(resError);

    }



}

在离子2中异步调用后无法加载图像

1 个答案: