Блог

Я пытаюсь обновить overlayNoRowsTemplate на случай, если для таблицы не существует данных. Но он работает некорректно, я использовал приведенный ниже код

.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>
  

Отображается только половина сообщения Это пользовательское сообщение для отсутствия данных

Ниже приведена ссылка на пример кода

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

overlayNoRowsTemplate работает только в том случае, если вы предоставляете родительский элемент

Это работает

 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>`
  

Попробуйте заключить сообщение в тег абзаца, например:

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

И почитайте немного об элементе span 😉 https://www.w3schools.com/tags/tag_span.asp