Angular 5页面重新加载数据刷新不起作用 [英] Angular 5 page reload data refresh not working

问题描述

我遇到一个问题，当我们在家时，创建和编辑产品页面.

创建并保存数据之后.它将重定向到可以查看所有最新产品的主页.不幸的是，直到手动刷新页面后，创建的数据才更新.

是否有任何技巧可以刷新或重新加载最新数据.这是我的代码

服务

  @Injectable()导出类httpServices {public current_lang;构造函数(私有http:HttpClient，私有_translate:TranslateService){}公共getCategory(){让类别= this.http.get(GlobalVariable.BASE_API_URL +类别");返回类别；}公共getSubProjects(){让子项目= this.http.get(GlobalVariable.BASE_API_URL +子项目");返回子项目；}公共getProductList(){//返回this.http.get("./assets/data/productlist.json");让产品= this.http.get(GlobalVariable.BASE_API_URL +产品/日期");退货；}} 

首页ts

  ngOnInit(){this._httpService.getCategory().subscribe(data => {this.categoryFilterArray =数据;});this._httpService.getSubProjects().subscribe(data => {this.subProjectFilterArray =数据;});this._httpService.getProductList().subscribe(data => {this.projectListData =数据;});} 

主页HTML

 < div * ngFor ="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] =" falsetooltipPlacement ="top"> {{item.name}}</h3>->< h3 title ="{{item.name}}"> {{item.name}}</h3>< label>< b> {{'SUB_PROJECT'|翻译}}:</b>{{item.subProject.name |翻译}}</label>< label>< b> {{'PROJECT_CATEGORY'|翻译}}:</b>{{item.category.name |翻译}}</label>< label>< b> {{'STATUS'|翻译}}:</b>{{item.status |翻译}}</label></div></div></div> 

创建

  this.http.post(GlobalVariable.BASE_API_URL +产品/创建"，正文).subscribe(resultArray => {this.successMsg =产品创建成功.";setTimeout((_ router:路由器)=> {this._router.navigate(['admin/home']);}，2000年)；} 

解决方案

这可能是浏览器缓存问题.通过为每个调用添加时间戳作为搜索参数，我解决了类似的问题.这是我的基本数据服务的摘录.

从<@>/ import {头，Http，RequestOptionsArgs，Response，ResponseContentType，URLSearchParams}；//整个RequestOptions-Object(用于get)私人requestOptions:RequestOptionsArgs = {};//仅是普通的SearchParams-Object(用于发布，放置和删除)私人requestUrlSearchParams =新的URLSearchParams();//每个后端调用都会被调用setSearchParamsTimeStamp(){this.requestUrlSearchParams.set('timestamp'，(new Date()).getTime().toString());this.requestOptions.search = this.requestUrlSearchParams;}//通用的getter方法public getData< T>(URL:字符串，logText:字符串):Promise< T>{//在触发呼叫之前设置最新的时间戳！this.setSearchParamsTimeStamp();返回this.http.get(URL，this.requestOptions).承诺().then(response =>(response.json()为T)).catch(this.handleError);}

也许有帮助.

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

解决方案

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页面重新加载数据刷新不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！