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

在我的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);
  }

组成部分

 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

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

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

---

谢谢。

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

试试这个

组件。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'];
        });
  }

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);
}

服务.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'];
        });
  }

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);
}

---

公共产品=新行为主体

我希望这能解决你的问题。如果您还有任何问题，请告诉我。
据我所知，行为主题可用于全局访问，直到一个请求生命周期。如果我们再次刷新页面，新的行为主题将使用默认值实例化。这就是原因，当您刷新页面时，产品名称被传递为空

试试这个

组件。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'];
        });
  }

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);
}

服务.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'];
        });
  }

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);
}

公共产品=新行为主体

我希望这能解决你的问题。如果您还有任何问题，请告诉我。
能否在刷新前附上api调用请求数据的屏幕截图，以及刷新后附上api调用请求数据的屏幕截图？您可以使用
local_storage
存储这些数据，但我真的不知道在那里存储大量数据的效率有多高。在浏览器打开时，还有一些替代方法可以将数据存储在JS/TS中。试试@suvethanantha，请看附件images@Nikson刷新页面时是否检查了传递给get_Image_Path的参数？它传递是否正确？@SuvethanNantha，我现在已经检查过了，所选产品名称没有传递给API调用方法，我如何解决这个问题您可以在刷新前附上API调用请求数据的截图，在刷新后附上API调用请求数据的截图您可以使用
local_storage
来存储这些数据，但我真的不知道在那里存储大量数据的效率有多高。在浏览器打开时，还有一些替代方法可以将数据存储在JS/TS中。试试@suvethanantha，请看附件images@Nikson刷新页面时是否检查了传递给get_Image_Path的参数？是否正确传递？@SuvethanNantha，我已经检查过了，所选产品名称没有传递给API调用方法，我如何解决这个问题issue@Nikson你能告诉我什么是pcast吗？这是另一个API调用吗？检查是否在为product_name刷新响应时收到响应product name是从另一个组件的onclick函数获取的，并且该值是从服务文件传递到服务文件的I import product name for api调用get image path您在服务文件中是否要导入product namepublic产品=新行为主体（“”）；pcast=this.product.asObservable（）；get_Product（Product:string）{this.current_Product=Product.trim（）；this.Product.next（this.current_Product）}通过使用这些行，我从一个组件中获取产品名称，并将其作为全局访问。我在服务文件中使用了上述代码，并在我的购物车组件中订阅产品名称，以便为API传递参数call@Nikson你能告诉我什么是pcast吗？这是另一个API调用吗？检查是否在为product_name刷新响应时收到响应product name是从另一个组件的onclick函数获取的，并且该值是从服务文件传递到服务文件的I import product name for api调用get image path您在服务文件中是否要导入product namepublic产品=新行为主体（“”）；pcast=this.product.asObservable（）；get_Product（Product:string）{this.current_Product=Product.trim（）；this.Product.next（this.current_Product）}通过使用这些行，我从一个组件中获取产品名称，并将其作为全局访问。我在服务文件中使用了上述代码，并在我的购物车组件中订阅产品名称，以便为API调用传递参数