当 url 失败时，无法在 ag-grid 中显示叠加模板

Question

当服务 URL 在 ag-grid 中失败时，我正在尝试显示覆盖模板。

但覆盖消息未按预期显示。

我想在 http 请求失败时显示Service URL failed消息。另一个叠加消息Please wait data is loading数据实际加载到网格中时。

当 url 失败时，我无法显示覆盖消息。 它始终显示第一条消息

我该如何解决这个问题？

这是我链接到 plunker 项目：https://plnkr.co/edit/MzpwnE0enLx2PVJOFUyn?p=preview

注意：要复制该问题，请提供一些无效的 http 网址

this._Service.httpPost(b, a)
.retryWhen((err) => {
return err.scan((retryCount) => {
retryCount += 1;
if (retryCount < 3) {
return;
} else {
this.gridOptions.overlayNoRowsTemplate = '<span class="messageStyles">Problem with service link. Please try again later</span>';
this.gridOptions.api.showNoRowsOverlay();
throw (err);
}
}, 0).delay(1000);
})
.catch(err => {
console.log(err);
return Observable.of(err);
});

Answer 1

更改下面的代码，它只会在数据存在的情况下更新行，否则会显示错误。

您可能需要以不同的方式处理方案，检查它是由于服务错误还是数据实际上是空的，还是由于某些其他错误。我没有在代码中处理这种情况。

onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.http
.get("https://raw.githubusercontent.com/ag-grid/ag-grid-doc1s/master/src/olympicWinnersSmall.json")
.retryWhen((err) => {
return err.scan((retryCount) => {
retryCount += 1;
if ( retryCount < 3 ) {
this.overlayLoadingTemplate = '<span class="messageStyles">Problem with service link. Please try again later</span>';
this.gridApi.showLoadingOverlay();
this.gridApi.refreshCells(params);
//  return;
} else {
this.overlayLoadingTemplate = '<span class="messageStyles">Problem with service link. Please try again later</span>';
this.gridApi.showLoadingOverlay();
this.gridApi.refreshCells(params);
throw(err);
}
}, 0).delay(1000);
})
.catch(err => {
console.log(err);
return Observable.of(err);
})
.subscribe(data => {
if(!data || !data.length)
{
this.gridApi.showLoadingOverlay();
}else
{
params.api.setRowData(data);    
}
});

}

Answer 2

如果只想更改消息，请修改网格 API 的localeTextFunc以返回其他消息。要使此示例起作用，您应该将gridOptions绑定到网格，例如<ag-grid-angular [gridOptions]="gridOptions"...，然后，在错误时调用ShowErrorOverlay()。

import { GridOptions } from '@ag-grid-community/core';

。

gridOptions: GridOptions;
private origLocaleTextFunc: any;
private errLocaleTextFunc: any;
ngInit() {
this.gridOptions = this.getDefaultGridOptions(this);
this.origLocaleTextFunc = this.gridOptions.localeTextFunc;
this.errLocaleTextFunc = (key, defaultValue) => {
if (key === 'noRowsToShow') {
return 'Error!';
} else {
return this.origLocaleTextFunc(key, defaultValue);
}
};
}

getDefaultGridOptions(context: any): GridOptions {
const rv = {} as GridOptions;
rv.localeTextFunc = (key, defaultValue) => {
switch (key) {
case 'noRowsToShow': return 'No rows!';
default: return defaultValue;
}
};
rv.context = { componentParent: context };
return rv;
}

showErrorOverlay() {
this.gridOptions.localeTextFunc = this.errLocaleTextFunc; // set error msgs
this.gridOptions.api.showNoRowsOverlay();
this.gridOptions.localeTextFunc = this.origLocaleTextFunc; // set default msgs
}

如果需要设置消息样式，请查看 https://www.ag-grid.com/javascript-grid-overlay-component/或仅修改.ag-overlay-no-rows-wrapper和.ag-overlay-no-rows-center类