同じページの表のデータを操作するための「追加」フォームと「削除」フォームを含む角度のあるWebサイトを作った。角度がキャッシュを有効にしたページを更新しない
ローカルまたはChrome Dev Console（キャッシュが無効）でテストすると、新しいアイテムを追加したり削除したりすると、テーブルが自動的に更新されます。クライアントのプロダクションサーバー（IISサーバー）でテストすると、Chrome Dev Consoleを開いた状態でのみ動作します。それ以外の場合は、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 a gist with the webpackを作成しました：いくつかの余分な調査の後、私はアプリのルートフォルダ上のweb.configファイルに以下を追加しようとしました。
<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>
しかし、私はまだ同じ動作をしています。 Dev Consoleを閉じたまま項目を追加すると、表は更新されません。しかし、私はdevのコンソールを開いてキャッシュを無効にしている場合、それは更新の必要性なしでそれを更新します。
編集2：シークレットウィンドウで作業しても問題は解決されません。
編集3： index.htmlにメタタグを追加しても問題は解決されません。
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
編集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!'));
}
}
編集5
私は見つけることができる唯一の解決策は、ウィンドウに私がlocation.reload(true)とのデータの更新を行うたびにリロードすることです。しかし、これはFirefox上でのみ動作し、Chromeでは動作しません。そして、私はあなたが単一ページアプリケーションを持っているこの唯一の理由を断念しなければならないということを認めません。
あなたのサービスからあなたの 'getProducts（）'と 'addProduct（）'を表示できますか？また、コンポーネント内で 'addProduct'を2回呼び出すとどうなりますか？ –
質問を更新しました...製品を何回追加しても問題ありません。デベロッパーコンソールを開いたりキャッシュをクリアして更新しない限り、テーブルは同じままです。 – Tasos
両方のリクエストが実行されますか？ –