Question

在我的Angular4应用程序中，我已经绑定了API响应，从我在组件中分配了图像路径的API响应，当我第一次加载特定组件时，分配了图像路径（API响应）并显示图像，如果我刷新浏览器窗口图像消失了。

在chrome中刷新网络选项时，API响应数组的长度为0.最初它显示了API的实际长度。

那么如何防止API响应被清除。

API代码......

 [AllowAnonymous]
        [HttpGet]
        [Route("api/data/GetImage")]
        public HttpResponseMessage GetImage(string imageName)
        {
            try
            {
                SqlParameter[] sqlParameters = new SqlParameter[2];
                if (imageName != " ")
                {
                    sqlParameters[0] = new SqlParameter("@Action", "SET_IMAGE");
                    sqlParameters[1] = new SqlParameter("@IMAGE_NAME", imageName);
                }
                HttpResponseMessage response = new HttpResponseMessage();
                DataSet ds = new DataSet();
                ds = conn.executeStoredProcedure_Dt("SP_ECOM_ImageBinding", sqlParameters);
                if (ds.Tables.Count > 0)
                {
                    response = Request.CreateResponse(HttpStatusCode.OK, ds.Tables);
                }
                return response;
            }
            catch (Exception ex)
            {
                return Request.CreateResponse(HttpStatusCode.InternalServerError);
            }
        }

服务档案

get_Image_Path(pName: string): Observable<Images[]> {
    this.current_product = pName.trim();
    this.serviceUrl = `http://localhost:abc/api/data/GetImage/?imageName=${this.current_product}`;
    return this.http.get<Images[]>(this.serviceUrl);
  }

模型

export interface Images {
    big_Images: string[];
    small_Images: string[];
    selected_Product_Images: string[]
  }

组件

 ngOnInit() {

    this.CartdataService.pcast.subscribe(myproduct => this.product_Name = myproduct);
    this.CartdataService.get_Image_Path(this.product_Name)
      .subscribe(
        data => {
          this.bigImages = data['0'];
          this.smallImages = data['1'];
          this.spImages = data['2'];
          this.i_path = this.bigImages['0']['big_Images'];
        });
  }

HTML

<div class="row">
   <img *ngFor="let smallImage of smallImages; let i = index" 
     (mouseenter)="mouseEnter($event)"  
     [src]="smallImage['small_Images']"
     [alt]="'img' + i" 
     class="img-thumbnail" 
     [attr.ref]="bigImages[i]['big_Images']">
</div>

当用户将鼠标悬停在小图像上时，它将显示悬停图像的大尺寸图像。

在我的情况下，当我刷新浏览器窗口时，图像路径被清除。感谢。

Answer 1

据我所知，行为主题可用于全局访问，直到一个请求生命周期。如果我们再次刷新页面，新的BehaviourSubject将使用默认值进行实例化。这就是原因，当你刷新页面时，product_Name被传递为空。

试试这个

<强> Component.ts

ngOnInit() {

    this.CartdataService.pcast.subscribe(myproduct => this.product_Name = myproduct);
    this.CartdataService.get_Image_Path(this.product_Name)
      .subscribe(
        data => {
          this.bigImages = data['0'];
          this.smallImages = data['1'];
          this.spImages = data['2'];
          this.i_path = this.bigImages['0']['big_Images'];
        });
  }

<强> service.ts

public product = new BehaviorSubject<any>(''); 
pcast = this.product.asObservable(); 

localprod;
constructor(){
    this.localprod=localStorage.getItem('product');
    if(this.localprod!='' || this.localprod!=undefined)
    {
      this.product.next(this.localprod);
    }
}

get_Product(product: string) { 
    this.current_product = product.trim(); 
    this.product.next(this.current_product);
    localStorage.setItem('product', this.current_product);
}

Demo for BehaviorSubject with refresh page

我希望这能解决你的问题。如果您仍有任何问题，请告诉我。

窗口刷新清除Angular4中的API响应

1 个答案: