Angular 5 page reload data refresh not working

Question

I have come across an issue that when we have like home, create and edit product pages.

After creating and saving the data. It will redirect to home page where can see all the latest product. Unfortunately created data is not updating until manually refresh the page.

Is there any tricks to refresh or reload the latest data. Here my code

Service

@Injectable()
export class httpServices {
   public current_lang;
   constructor(private http: HttpClient,private _translate:TranslateService) {

   }
   public getCategory() {
        let categories = this.http.get(GlobalVariable.BASE_API_URL+"categories");
        return categories;
   }
   public getSubProjects() {
        let subprojects = this.http.get(GlobalVariable.BASE_API_URL+"subprojects");
        return subprojects;
   }

   public getProductList() {
     //return this.http.get("./assets/data/productlist.json");     
     let products = this.http.get(GlobalVariable.BASE_API_URL+"products/date");
     return products;
   }
}

Home ts

ngOnInit(){
    this._httpService.getCategory().subscribe(data=>{

      this.categoryFilterArray = data;
    });

    this._httpService.getSubProjects().subscribe(data=>{

      this.subProjectFilterArray = data;
    });

    this._httpService.getProductList().subscribe(data=>{

      this.projectListData = data;

    });

  }

Home HTML

<div  *ngFor="let item of projectListData | filter : searchText">

                  <div class="project-wrap" [routerLink]="['/admin/project-detail/', item.id]">
                <div class="project-img">
                  <img src="{{apibaseurl}}images/product_{{item.id}}.png?{{timestamp}}" alt="project" />
                </div>  
                <div class="project-content">
                   <!--  <h3 tooltip="{{item.name}}" [tooltipDisabled]="false" [tooltipAnimation]="false"
                  tooltipPlacement="top">{{item.name}}</h3>-->
                  <h3 title="{{item.name}}">{{item.name}}</h3>
                  <label><b>{{ 'SUB_PROJECT' | translate}}:</b> {{ item.subProject.name | translate}}</label>
                  <label><b>{{ 'PROJECT_CATEGORY' | translate}}:</b> {{ item.category.name | translate}}</label>
                  <label><b>{{ 'STATUS' | translate}}:</b> {{ item.status | translate}}</label>
                </div> 
              </div>      
            </div>

Create

this.http.post(GlobalVariable.BASE_API_URL+'product/create', body)
            .subscribe( resultArray => {             
                this.successMsg = "Product created successfully." ; 
                setTimeout((_router: Router) => {
                    this._router.navigate(['admin/home']);
                }, 2000);
            }

Can you please expand? What data is not being "refreshed", how do you navigate back home after creating a product? — Jamie Rees, Jan 31 '19 at 08:34
Created product data is not updated in home page after submitted and auto redirecting to home page in post. — klmuralimohan, Jan 31 '19 at 08:39

score 0 · Answer 1 · answered Jan 31 '19 at 10:30

This could be a browser caching problem. I solved a similar issue by adding a timestamp as a search param to each call. Here is a snippet of my basic data service.

import { Headers, Http, RequestOptionsArgs, Response, ResponseContentType, URLSearchParams } from '@angular/http';

// the entire RequestOptions-Object (for get)
private requestOptions: RequestOptionsArgs = {};

// just the plain SearchParams-Object (for post, put and delete)
private requestUrlSearchParams = new URLSearchParams();

// gets called with every single backend call
setSearchParamsTimeStamp() {
    this.requestUrlSearchParams.set('timestamp', (new Date()).getTime().toString());
    this.requestOptions.search = this.requestUrlSearchParams;
}

// a generic getter method
public getData<T>(url: string, logText: string): Promise<T> {
    // Set the latest timestamp before firing the call!
    this.setSearchParamsTimeStamp();

    return this.http.get(url, this.requestOptions)
        .toPromise()
        .then(response => (response.json() as T))
        .catch(this.handleError);
}

Maybe this helps.

Angular 5 page reload data refresh not working

1 Answers1

Linked