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

【问题标题】：Unable to display overlay template in ag-grid when url failsurl 失败时无法在 ag-grid 中显示覆盖模板
【发布时间】：2023-04-07 00:15:01
【问题描述】：

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

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

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

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

我该如何解决这个问题？

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

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

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);
  });

【问题讨论】：

标签： angular ag-grid

【解决方案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);    
             }
      });

}

【讨论】：

谢谢。但是Service Error 404 和No Data to display 都会显示此消息。我需要显示不同的叠加信息
此示例缺少 overlayLoadingTemplate 与 ag-grid 的绑定，因此无法按原样工作。如何模板化消息写在这里：ag-grid.com/javascript-grid-overlay-component

【解决方案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 类

【讨论】：