角2：データテーブル/ HTMLテーブル - 2回目のリクエストでデータが表示されない

Question

のデータを要求するときに、角度データテーブルまたはHTMLテーブルのデータを表示する際に問題が発生しました。時間またはそれ以降の試行

最初の読み込みは適切に行われますが、別のページに移動して戻ってくると、テーブルに空白/データが表示されません。ただし、JSONデータはフェッチされ、コンソールに正しく表示されます。また、div内のデータを直接補間すると、問題なくJSONが再び表示されます。しかし、同じものはテーブルでは動作しません。

これは私が使用しているスニペットです：

コンポーネント getDrugs.component.ts

ngOnInit() 
{    
    this.adminService.getAllDrugs().subscribe(
     res => { 
      this.data = res; 
      console.log(JSON.stringify(res));   
      //return res; 
     }, 
     err => { 
      console.log("Error while retrieving existing Drug Details : " + err); 
     } 
    ) 
}  

サービス drugs.service.ts

getAllDrugs(): any { 
    console.log('getAllDrugs service invoked'); 

    return this.http.get(`${this.webApiBaseUrl}/GetDrugList`) 
     .map(res => {        
      console.log(res.json()); 
      return res.json(); 
     }) 
     .catch(error => { 
      console.log(error); 
      return Observable.throw(error); 
     });     
}    

HTMLテンプレート getDrugs.html

<form>    
 
    <ba-card title="Drug Records">  
 
        
 
     <div class="form-group" *ngIf="data">       
 
      <table class="table table-bordered table-hover" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage"> 
 
       <thead> 
 
        <tr> 
 
         <th style="width: 50%; font-weight:bold; font-size:larger; text-align:left;"> 
 
          <mfDefaultSorter by="tradeName">Trade Name</mfDefaultSorter> 
 
         </th> 
 
         <th style="width: 50%; font-weight:bold; font-size:larger;"> 
 
          <mfDefaultSorter by="comp">Composition</mfDefaultSorter> 
 
         </th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr *ngFor="let item of mf.data; let i = index"> 
 
         <td style="width: 50%; text-align:left;">{{item?.tradeName}}</td>   
 
         <td style="width: 50%;"> 
 
          <table *ngIf = "item.composition"> 
 
           <tr *ngFor="let comp of item.composition"> 
 
            {{comp}} 
 
           </tr> 
 
          </table> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
       <tfoot> 
 
        <tr> 
 
         <td colspan="4"> 
 
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator> 
 
         </td> 
 
        </tr> 
 
       </tfoot> 
 
      </table> 
 
     </div> 
 
    </ba-card> 
 
</form>