角2：數據表/ HTML表 - 無關於第二次請求

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>

Answer 1

你嘗試把服務不構造函數ngOninit（）？ 此外，爲什麼您使用item？.composition作爲語法，因爲您還檢查了* ngIf =「item.composition」

然後在正常的表格用法中使用然後使用。