我创建了一个有角度的网站，其中包含一个“添加”和一个“删除”表单来操作同一页面上的表格上的数据。
当我在本地或使用Chrome Dev Console(禁用缓存)进行测试时，当我添加新项目或删除新项目时，该表格会自动刷新。当我在客户端的生产服务器(IIS服务器)上测试它时，它仅适用于打开的Chrome开发者控制台。否则，他们必须使用CTRL F5刷新缓存并在页面上显示更改。
这是组件上的代码：
addProduct() {
this._productsService.addProduct(this.addFormProductItem)
.subscribe(v => {
this._productsService.getProducts().subscribe(
products => {this.products = products, this.onChangeTable(this.config)}
);
});
this.addmodalWindow.hide();
return;
}
onChangeTable(config: any, page: any = {
page: this.page,
itemsPerPage: this.itemsPerPage
}): any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
}
if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
}
this.ng2TableData = this.products;
this.length = this.ng2TableData.length;
let filteredData = this.changeFilter(this.ng2TableData, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.length = sortedData.length;
}
我的猜测是它与某些服务器配置或webpack代码有关。但是，我对后者并不熟悉，我只是将它留在我使用的起始包装上。
编辑1：经过一些额外的研究，我尝试在应用程序的根文件夹上的web.config文件中添加以下内容。
但是，我仍然有相同的行为。在Dev Console关闭时添加项目，它不会更新表格。但是如果我打开了开关控制台并禁用了缓存，那么它就会更新它而无需刷新。
编辑2：使用隐身窗口无法解决问题。
编辑3：在index.html上添加元标记并不能解决问题。
编辑4：
getProducts() {
return this._http.get(this.API + '/products/all')
.map((response: Response) => response.json().products);
}
addProduct(product:Product) {
if ( this._loggedInGuard.isLoggedIn() ) {
let token = localStorage.getItem('my.token');
let body = JSON.stringify(product);
let headers = new Headers(
{ 'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token});
return this._http
.post(this.API + "/products/store", body, {headers: headers} )
.map(res => res.json())
.catch(this._responseService.catchBadResponse)
.do(() => this._responseService.success('Success. You added a product!'));
}
}
编辑5
我能找到的唯一解决方案是每次使用location.reload(true)对数据进行更新时重新加载窗口。但同样，这仅适用于Firefox，而不适用于Chrome。我不会接受你必须放弃使用单页应用程序来实现这一目的的唯一原因。
