Angular2-sa datatable仅第一次加载数据

数据网格：

<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'},
];

当我导航到包含datagrid的组件时，它正确地显示了数据（12条记录）

但是，当我离开并返回到同一组件时，网格是空的。但是，

ngOnInit（）

中的

console.log

始终记录所有12条记录。但它们刚刚出现在网格中

但是

bundles.length

会在表下打印12-

---

如何修复此问题？

似乎第二次以后，

datatable

在获取用于绑定的数据之前被渲染

我尝试使用

setTimeOut

，但没有成功。对我有效的方法是使用

我编写了一个

resolver服务

，它返回类型为

taxereceiptingbundle[]

的

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;
            }
        });
     }
 }

在组件中，我不是从TaxReceiptingBundleService获取数据，而是从route对象获取数据

constructor(private router: Router) { }

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

---

现在，导航正在等待TaxReceiptingBundle的列表。

我遇到了同样的问题，并提出了一个可能更简单的解决方案（尽管它仍然感觉像是一个解决方法）

在component类中，我定义了一个变量

dataAvailable

，默认情况下该变量为

false

，并在加载数据后设置为

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模块或-组件级别上工作的解决方案，这样在我的组件中，我就可以不用任何变通方法就直接使用datatables了

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