Zeige Daten Lade Status mit semantischen ui während Daten geladen werden, anstatt "Keine Datensätze gefunden" mit PrimeNg

Question

Ich zeige Tabellendaten aus einer eckigen 2 Anwendung mit Hilfe von PrimeNg. Die Version von PrimeNg, die ich mit 2.0.4 benutze und die aufgrund von Konfigurationseinschränkungen nicht aktualisierbar ist. Das Projekt verwendet auch semantische ui.

Wenn ich auf den Link klicke, um die Tabelle anzuzeigen, wird "No records found" angezeigt, obwohl noch Daten in der Tabelle geladen werden und die Daten in der Tabelle angezeigt werden, sobald die Daten geladen sind.

Ich möchte vermeiden, dass "No records found" angezeigt wird, stattdessen möchte semantic ui loader (spinner) anzeigen, während Daten geladen werden, und dann die PrimeNg DataTable anzeigen, sobald das gesamte Datenladen abgeschlossen ist.

Ich freue mich auf einen Hinweis, wie man diese beiden verbindet. Gibt es ein Attribut, das anzeigt, dass Daten in der ngprime-Tabelle geladen sind, und dieses Attribut verwendet werden kann, um zu entscheiden, ob der semantische UI-Lader gedreht werden soll oder nicht?

------------------------------ EDIT --------------- -------------------------

Hallo

ich folgende Änderungen vorgenommen und es funktioniert teilweise. Ein Teil des Spinner wird während der Datenladephase abgeschnitten. Es verhält sich nicht anders, auch wenn ich seine Größe auf Medium erhöht habe.

<div class="ui segment"> 
    <div class="ui active dimmer" *ngIf="loading"> 
     <div class="ui medium text loader">Loading table</div> 
    </div> 

    <p-dataTable *ngIf="!loading"> 
     .......... 
     .......... 
    </p-dataTable> 
</div> 

Dank

Answer 1

Sie zu Ihrem component.ts hinzufügen können loading:boolean = true; ein Flag-Datei, wenn Sie haben Ihre Daten auf false this.loading = false; drehen dann Direktive Sie verwenden nur ngIf auf Datatable Komponente *ngIf="!loading" und * ngIf = "Laden "in deinem semantischen-ui Spinner.