角5页面重载数据刷新不工作(Angular 5 page reload data refresh n

2019-10-30 13:20发布

我所遇到的一个问题是,当我们有像家,创建和编辑产品的页面。

创建和保存数据后。 它会重定向到主页在那里可以看到所有的最新产品。 不幸的是创建的数据没有更新,直到手动刷新页面。

有没有什么技巧,刷新或重新加载最新的数据。 在这里我的代码

服务

@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 page reload data refresh not working