DataTableを角度2で再レンダリングする

Question

私のコンポーネントでは、データテーブルを使用してバックエンドからのデータを表示しています。私は、バックエンドから（サービスを使用して）データを取得し、それを正常に解析し、データをデータテーブルに表示することができます。しかし、私の問題は、コンポーネントが最初にレンダリングされたときに、ネットワークコールがまだ完了していないため、テーブルに"テーブルにデータがありません"が設定されていることです。ネットワークコールが完了すると、テーブルにはサーバーからのデータが入力されますが、「テーブルにはデータがありません」というメッセージが表示されます。

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

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

私はngOnInit（）内でこのメソッドを呼び出しています -

はここに私のネットワーク呼び出しコードです。私はまた、コンストラクタ内でこのメソッドを呼び出すことも試みましたngAfterViewChecked（）、しかし成功はありません。

私のshowData（）メソッドは決して呼び出されません。

データテーブルのドキュメントでは、テーブルを再レンダリングするために使用できるrerender（）と呼ばれるものが挙げられていますが、どこで使用するのかわかりません。私はそれを私のshowData（）メソッドの中に置いていますが、決して呼び出されることはありません。

私も "setTimeout"を使って5秒のタイムアウトを設定しましたが、それでも動作しないようです。

私のHTMLコード -

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

助けてください。

Answer 1

私たちが見てより多くのコードがあったが、あなたはまた、以下の追加がDataTableの-角度モジュールの使用のために記載されている表情here持つことができればそれは良いだろう：それはあなたのコードで

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

をすべきですうまく動作します。これはまさにあなたがデバッグするのに役立ついくつかのステップではありません。

まず、this.itemListがundefinedまたはnullであることを確認してください。

データを取得するかどうかを確認するには、doを追加してデバッグします。これにコンポーネントコードを変更 ：

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

をレンダリングするためのテーブルを強制的this.dtTrigger.next()を添加@Giannis言及したように。

Answer 3

Angular datatablesを使用できますが、このドキュメントの手順に従ってください。

コードには、this.itemListにデータを取得した後にthis.dtTrigger.next()を追加します。以下のようになります。

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

      // Add here.. 

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