Tôi đã tạo một trang web góc có chứa biểu mẫu "thêm" và "xóa" để thao tác dữ liệu trên một bảng trên cùng một trang.Góc không cập nhật trang với bộ nhớ cache được bật
Khi tôi thử nghiệm cục bộ hoặc với Chrome Dev Console (bộ nhớ cache bị tắt), khi tôi thêm một mục mới hoặc xóa một mục, bảng sẽ tự động làm mới. Khi tôi kiểm tra nó trên máy chủ sản xuất (IIS Server) của khách hàng của tôi, nó chỉ hoạt động với Chrome Dev Console được mở. Nếu không, họ phải sử dụng CTRL + F5 để làm mới bộ nhớ cache và hiển thị các thay đổi trên trang.
Đây là mã vào các thành phần:
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;
}
tôi đoán là nó là một trong hai liên quan đến một số cấu hình máy chủ hoặc vào mã webpack. Tuy nhiên, tôi không quen thuộc với thứ hai và tôi chỉ còn lại nó như nó đã được trên gói khởi đầu tôi sử dụng.
Tôi tạo ra a gist with the webpack vì nó là một tập tin dài
Sửa 1: Sau khi một số nghiên cứu thêm, tôi cố gắng thêm những điều sau đây trên một tập tin web.config trên thư mục gốc của ứng dụng.
<caching enabled="false" enableKernelCache="false">
<profiles>
<add extension=".css" policy="DontCache" kernelCachePolicy="DontCache" />
<add extension=".html" policy="DontCache" kernelCachePolicy="DontCache" />
<add extension=".js" policy="DontCache" kernelCachePolicy="DontCache" />
</profiles>
</caching>
Tuy nhiên, tôi vẫn có hành vi tương tự. Thêm một mục với Dev Console đã đóng, nó không cập nhật bảng. Nhưng nếu tôi có bàn điều khiển dev mở và tắt bộ nhớ cache, sau đó nó cập nhật nó mà không cần làm mới.
Chỉnh sửa 2: Làm việc trên Cửa sổ ẩn danh không khắc phục được sự cố.
Chỉnh sửa 3: Thêm thẻ meta trên index.html không khắc phục được sự cố.
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
Sửa 4:
getProducts() {
return this._http.get(this.API + '/products/all')
.map((response: Response) => <Product[]>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!'));
}
}
Sửa 5
Giải pháp duy nhất tôi có thể tìm thấy là để tải lại cửa sổ mỗi khi tôi làm một bản cập nhật trên dữ liệu với location.reload(true). Nhưng một lần nữa, điều này chỉ hoạt động trên Firefox chứ không phải trên Chrome. Và tôi sẽ không chấp nhận rằng bạn phải từ bỏ lý do duy nhất để có một Ứng dụng Trang đơn để thực hiện công việc này.
Bạn có thể hiển thị 'getProducts()' và 'addProduct()' từ dịch vụ của mình không. Ngoài ra, điều gì sẽ xảy ra khi bạn gọi 'addProduct' trong thành phần của bạn hai lần? –
Đã cập nhật câu hỏi ... Không quan trọng bao nhiêu lần tôi thêm sản phẩm. Bảng vẫn giữ nguyên trừ khi tôi mở Dev Console hoặc xóa bộ nhớ cache và làm mới. – Tasos
Cả hai yêu cầu đều được thực hiện? –