DataTable in Angular 2 neu rendern

Question

In meiner Komponente verwende ich Daten, um die Daten von meinem Backend zu zeigen. Ich bin in der Lage, die Daten vom Backend zu erhalten (unter Verwendung eines Service), parse es erfolgreich und zeige die Daten in der Datentabelle an. Mein Problem ist jedoch, dass der Netzwerkanruf bei der ersten Wiedergabe meiner Komponente noch nicht abgeschlossen ist und daher die Tabelle mit "Keine Daten in der Tabelle verfügbar" ausgefüllt ist. Sobald der Netzwerkaufruf abgeschlossen ist, wird die Tabelle mit den Daten vom Server gefüllt, aber die Nachricht "Keine Daten in der Tabelle verfügbar" ist noch vorhanden.

Hier ist mein Netzwerk Anruf-Code -

fetchData(){ 
    this.networkservice.getAllReceipts() 
      .subscribe(

      res => { 
       this.itemList = res; 
      }, error => alert(error), 
      () => this.showData()); 
    } 

Ich rufe diese Methode in der ngOnInit(). Ich habe auch versucht, diese Methode innerhalb des Konstruktors sowie innerhalb ngAfterViewChecked() aufzurufen, aber keinen Erfolg.

Meine ShowData() -Methode wird nie aufgerufen.

In der Dokumentation von Datentabellen haben sie etwas namens renderder() erwähnt, das verwendet werden kann, um die Tabelle neu zu rendern, aber ich kann nicht herausfinden, wo ich es verwenden soll. Ich habe es in meine showData() -Methode platziert, aber es wird nie aufgerufen.

Ich habe auch "setTimeout" verwendet, um ein Timeout von 5 Sekunden zu setzen, aber selbst das scheint nicht zu funktionieren.

Mein HTML Code-

<table id="receiptTable" [dtTrigger]="dtTrigger" datatable class="row-border hover"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>First name</th> 
     <th>LastName name</th> 
     <th>Action</th> 
    </tr> 
    </thead> 

    <tbody *ngIf="itemList"> 
     <tr *ngFor="let user of itemList"> 
     <td>{{user.id}}</td> 
     <td>{{user.firstName}}</td> 
     <td>{{user.lastName}}</td> 
     <td><button (click)="getUser(user.id)">Edit</button></td> 
     </tr> 
    </tbody> 
</table> 

Bitte helfen.

Answer 1

Es wäre besser, wenn wir mehr Code haben zu sehen, aber Sie können auch einen Blick here, wo die folgenden Ergänzungen für die Datentabellen-Winkelmodul Nutzung genannt:

// We use this trigger because fetching the list of persons can be quite long, 
// thus we ensure the data is fetched before rendering 
dtTrigger: Subject = new Subject(); 

ngOnInit(): void { 
    this.http.get('data/data.json') 
     .map(this.extractData) 
     .subscribe(persons => { 
     this.persons = persons; 
     // Calling the DT trigger to manually render the table 
     this.dtTrigger.next(); 
     }); 
    } 

Answer 2

mit Ihrem Code soll es funktioniert gut. Dies ist nicht genau eine Antwort, um Ihnen beim Debuggen zu helfen.

Zuerst sicherstellen, this.itemList ist undefined oder null nur um sicher zu sein.

Um zu überprüfen, ob Sie überhaupt Daten erhalten, fügen Sie do zum Debuggen hinzu. das Ändern des Komponentencode an:

this.networkservice.getAllReceipts() 
    .do(res => console.log(res)) 
    .subscribe(
     res => {this.itemList = res}, 
     error => console.error(error) 
    ); 

von @Giannis erwähnt Wie this.dtTrigger.next() Hinzufügen der Tabelle zwingen soll zu machen.

Answer 3

Sie können Angular datatables verwenden, folgen Sie einfach den Schritten in dieser Dokumentation.

in Ihrem Code hinzufügen this.dtTrigger.next(), nachdem Sie Ihre Daten in this.itemList erhalten. wie unten:

fetchData() { 
    this.networkservice.getAllReceipts().subscribe(
     res => { 
      this.itemList = res; 
      this.dtTrigger.next(); 

      // Add here.. 

     }, error => alert(error), 
     () => this.showData() 
    ); 
}