проблема с Datatable (jquery) с angular (по данным Firebase) - PullRequest
Новая
       34

проблема с Datatable (jquery) с angular (по данным Firebase)

0 голосов
/ 25 мая 2020

в первый раз, когда отображается моя страница, таблица данных не работает :( кнопки не отображаются и появляется сообщение об ошибке " emptyTable ": "Aucune donnée disponible dans le tableau ", пока таблица отображается правильно) я думаю, что это проблема инициализации!

datatable KO

1

если я повторно подключаю страницу моей таблицы, datatable работает, появляется кнопка!

2

здесь мой код TS: (комментарий - это моя наблюдаемая таблица (база данных firebase) и dtBasicExample - html таблица), я помещаю свои данные в ngOninit () 

ngOnInit()
  {
    this.commentaireSubscription = this.joueurService.commentaireSubject.subscribe(
    (commentaire: Commentaire[]) => {
      this.commentaire = commentaire;
    }      
  );

    $(document).ready(function() {
        $('#dtBasicExample').DataTable( {
            pageLength: 15,
            "order": [[ 0, "desc" ]] ,
            dom: 'p',
            language: {
              processing:     "Traitement en cours...",
              search:         "Rechercher :",
              lengthMenu:    "Afficher _MENU_ éléments",
              info:           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
              infoEmpty:      "Affichage de l'élement 0 à 0 sur 0 éléments",
              infoFiltered:   "(filtré de _MAX_ éléments au total)",
              infoPostFix:    "",
              loadingRecords: "Chargement en cours...",
              zeroRecords:    "Aucun élément à afficher",
              emptyTable:     "Aucune donnée disponible dans le tableau",
              paginate: {
                first:      "Premier",
                previous:   "Précédent",
                next:       "Suivant",
                last:       "Dernier"
              }}

         } );
        $('.dataTables_length').addClass('bs-select');
        } );

и мой HTML код: (не отображаются на моей HTML странице, это нормально) 

<table id="dtBasicExample" class="display">
  <thead>
    <tr>
        <th>date?</th>
        <th>qui ?</th>
        <th>quoi ?</th>
    </tr>
</thead>
  <tbody>
    <tr *ngFor="let com of commentaire; let i = index">
      <th [style.color] = "com.uid === 0 ? 'green' : 'red'" style="font-size: 8px; width:29%">Le {{com.date}}<br>à {{com.heure}}</th>
      <td scope="row" (click) ="onViewJoueur(com.keyJoueur)" ><img style = "max-width: 40px" onmouseover="this.style.cursor='pointer'" [src] ="getphotoJoueur(com.uid,com.keyJoueur)" alt="Avatar"></td>
      <td><strong [style.color] = "com.uid === 0 ? 'green' : 'red'" style="font-size: 10px ; "> {{com.nom}}  </strong> <br>{{com.commentaire}}</td>
    </tr>
  </tbody>
  </table>

спасибо за помощь! Думаю, это не сложная проблема, но я не нашел!

...