非同期呼び出し後にイメージを読み込むことができません2

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'または 'undefined'の場合は表示のケースを実装しました。

これがエラーを引き起こすタイムアウトであるかどうかを調べるには、私が「Angular2 Service/Provider」として使用しているそのクラスからインスピレーションを得て、サーバーへのすべての呼び出しを行います。タイムアウトのイベントを管理します。あなたは：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); 

    } 



}