Question

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

但叠加消息未按预期显示。

我想在http请求失败时显示flexbox消息。当数据实际加载到网格中时，另一个覆盖消息Service URL failed。

当网址失败时，我无法显示重叠消息。它总是显示第一条消息

我该如何解决这个问题？

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

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

Please wait data is loading

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类

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

2 个答案: