J'essaie de mettre à jour overlayNoRowsTemplate au cas où aucune donnée n'existe pour la table. Mais cela ne fonctionne pas correctement, j'ai utilisé le code ci-dessous

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

Seul la moitié du message est affiché Ceci est un message personnalisé pour aucune donnée

Ci-dessous le lien de code d'exemple

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

1
Mamta 2 sept. 2020 à 15:14

2 réponses

Meilleure réponse

overlayNoRowsTemplate ne fonctionne que si vous fournissez un élément parent

Cela fonctionne

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

Mais cela ne montre que le premier élément, dans ce cas, celui en contient un

overlayNoRowsTemplate = `<span>one</span><span>two</span>`
1
NearHuscarl 2 sept. 2020 à 12:40

Essayez d'envelopper le message dans une balise de paragraphe, par exemple:

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

Et allez lire un peu sur l'élément span;) https://www.w3schools.com/tags/tag_span.asp

1
GoranSu 2 sept. 2020 à 12:30