无数据的 AgGrid 自定义模板无法正常工作

Question

我正在尝试更新 overlayNoRowsTemplate 以防 table 不存在数据。但是它不能正常工作我使用了下面的代码

.ts

export class AppComponent {
  rowData = []
  columnDefs = [
    {
      headerName: "ID",
      field: "id",
    },
    {
      headerName: "Value",
      field: "value",
    },

  ];
  overlayNoRowsTemplate = `This is Custom Message for no data</br> <span class="error">Login After some time</span>`

}

.html

<ag-grid-angular style="width: 100%; height: 120px;" class="ag-theme-fresh" 
    [rowData]="rowData"
        [columnDefs]="columnDefs"
    [overlayNoRowsTemplate]="overlayNoRowsTemplate">
    </ag-grid-angular>

只显示了一半消息这是没有数据的自定义消息

下面是示例代码link

https://stackblitz.com/edit/angular-ag-grid-angular-8awpde?file=app/app.component.ts

Answer 1

尝试将消息封装在段落标记中，例如：

overlayNoRowsTemplate = "This is Custom Message for no dataLogin After some time"

然后阅读一些关于 span 元素的内容 ;) https://www.w3schools.com/tags/tag_span.asp

Answer 2

overlayNoRowsTemplate 仅在您提供父元素时有效

这个works

overlayNoRowsTemplate = `<span>
      This is Custom Message for no data
      </br>
      <span class="error">Login After some time</span>
   </span>`

但这只显示第一个元素，在这种情况下，一个包含一个

overlayNoRowsTemplate = `<span>one</span><span>two</span>`

无数据的 AgGrid 自定义模板无法正常工作

AgGrid custom template for no data is not working correctly

ag-grid

angular