Angular 5頁面重新加載數據刷新不起作用

Question

我遇到了一個問題，當我們喜歡家時，請創建和編輯產品頁面。

創建並保存數據之后。 它將重定向到可以查看所有最新產品的主頁。 不幸的是，直到手動刷新頁面后，創建的數據才更新。

是否有任何技巧來刷新或重新加載最新數據。 這是我的代碼

服務

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

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;

    });

  }

家用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>

創造

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

Answer 1

這可能是瀏覽器緩存問題。 通過為每個調用添加時間戳作為搜索參數，我解決了類似的問題。 這是我的基本數據服務的一個片段。

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

也許這會有所幫助。