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

Question

数据网格:

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

下打印 12

我该如何解决这个问题？

Answer 1

似乎是从第二次开始，datatable 在获取绑定数据之前就已经渲染了。

我尝试使用 setTimeOut，但没有成功。对我有用的是使用 resolver。

我写了一个 resolver service 其中 returns 一个 Promise 类型 TaxReceiptingBundle[] :

@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 列表。

Answer 2

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

在组件class中，我定义了一个变量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 文件中，只需隐藏 table-widget 直到数据可用：

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

这不会阻止页面加载，只是 table。我仍在寻找一种适用于 sa-datatable-module 或 -component 级别的解决方案，以便在我的组件中我可以只使用 datatables 而无需任何变通方法。

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

Angular2 - sa-datatable loads data only for the first time

angular

datatable

smartadmin