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

也许有帮助。

Angular 5页面重新加载数据刷新不起作用

1 个答案: