Angular2 - 僅首次

Question

數據網格 SA-數據表載荷數據：

<sa-datatable [options]="{ 
       data: bundles, 
       columns: [ {data: 'srNo'}, {data: 'name'}, { data: null, defaultContent: '<button class=\'btn btn-default\'>Details</button>' } ] }" 
       paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%"> 
    <thead> 
     <tr> 
      <th data-hide="phone">Sr. No.</th> 
      <th data-class="expand"><i class="text-muted hidden-md hidden-sm hidden-xs"></i> Name</th> 
      <th></th> 
     </tr> 
    </thead> 
</sa-datatable> 
<div> {{bundles.length }} </div> 

組件：

Component({ 
    selector: 'tax-receipting-bundles', 
    templateUrl: './tax-receipting-bundles.component.html', 
    providers: [ TaxReceiptingBundleService ] 
}) 

export class TaxReceiptingBundlesComponent implements OnInit { 
    bundles: TaxReceiptingBundle[]; 

    constructor(private service: TaxReceiptingBundleService) { 
     this.bundles = []; 
    } 

    ngOnInit() { 
     this.service.getBundles() 
      .then(b=> { 
       this.bundles = b; 
       console.log(this.bundles); 
     }); 
} 

的服務：

@Injectable() 
export class TaxReceiptingBundleService { 
    getBundles() { 
     return Promise.resolve(TAXRECEIPTINGBUNDLES); 
    } 
} 

模擬數據

export const TAXRECEIPTINGBUNDLES: TaxReceiptingBundle[] = [ 
    {id: 1, srNo: 1, name: 'Bundles for February 2005'}, 
    {id: 2, srNo: 2, name: 'CDN Bundles'}, 
    . 
    . 
    {id: 12, srNo: 12, name: 'Bundles for April 2004'}, 
]; 

當我導航到包含數據網格組件，它示出了數據正確地（12個記錄）。

但是，當我離開並回到相同的組件時，網格是空的。但是，ngOnInit()中的console.log始終記錄所有12條記錄。但他們現在剛剛在網格中顯示。

但bundles.length打印12在桌子底下 -

我該如何解決這個問題？

Answer 1

看起來第二次開始，datatable在獲取綁定數據之前就已經被渲染了。

我試過使用setTimeOut，但它沒有奏效。什麼對我有效使用resolver。

我寫一個resolver service返回TaxReceiptingBundle[]類型的Promise：

@Injectable() 
export class TaxReceiptingBundlesResolver implements Resolve< TaxReceiptingBundle[]> { 
    constructor(private cs: TaxReceiptingBundlesService, private router: Router) {} 

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<TaxReceiptingBundle[]> { 

     return this.cs.getBundles().then(c => { 
      if (c) { 
       return c; 
      } else { 
       this.router.navigate(['/home']); 
       return null; 
      } 
     }); 
    } 
} 

用於在需要它的路徑解析器：而不是從獲取數據

export const taxReceiptingRoutes: Routes = [ 
    { 
     path: '', 
     component: TaxReceiptingBundlesComponent, 
     data: { 
      pageTitle: 'Bundles Setup' 
     }, 
     resolve: { 
      bundles: TaxReceiptingBundlesResolver 
     } 
    } 
] 

@NgModule({ 
    imports: [RouterModule.forChild(taxReceiptingRoutes)], 
    exports: [RouterModule], 
    providers: [TaxReceiptingBundlesResolver, TaxReceiptingBundlesService] 
}) 

在組件中， TaxReceiptingBundleService，我從路由對象中得到它。

constructor(private router: Router) { } 

ngOnInit() { 
    this.route.data 
     .subscribe((data: { bundles: TaxReceiptingBundle[] }) => { 
      .. 
    }); 
} 

現在，導航等待列表TaxReceiptingBundle s。

Answer 2

我遇到了同樣的問題，並想出了一個可能更簡單的解決方案（儘管它仍然感覺像一個解決方法）。

在組件類中，我定義了一個默認爲false的變量dataAvailable，並且一旦加載數據就將其設置爲true。

export class TaxReceiptingBundlesComponent implements OnInit { 
    bundles: TaxReceiptingBundle[]; 
    dataAvailable: boolean = false; 

    constructor(private service: TaxReceiptingBundleService) { 
     this.bundles = []; 
    } 

    ngOnInit() { 
    this.service.getBundles() 
     .then(b=> { 
      this.bundles = b; 
      this.dataAvailable = true; 
    }); 
} 

在組件的HTML文件，只需隱藏表窗口小部件，直到數據可用：

<sa-datatable *ngIf="dataAvailable" [options]="..." ...> 
... 
</sa-datatable> 

這並不妨礙該頁面被加載，只是表。我仍然在尋找一種適用於sa-datatable-module或-component級別的解決方案，這樣在我的組件中，我可以直接使用數據表而不用任何解決方法。