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

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

然而，当我离开并返回相同的组件时，网格是空的。但是，console.log中的ngOnInit()始终会记录所有12条记录。但他们现在才刚刚出现在网格中。

但bundles.length在表格下打印12 -

我该如何解决这个问题？

Answer 1

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

在组件类中，我定义了一个默认为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-module或-component级别的解决方案，因此在我的组件中我可以使用数据表而无需任何解决方法。

Answer 2

似乎是第二次，datatable在获取用于绑定它的数据之前被渲染。

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

我写了一个resolver service，它返回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 s。

的列表

Angular2 - sa-datatable仅首次加载数据

2 个答案: