1

数据网格：

<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 条记录）。

但是，当我离开并返回到同一个组件时，网格是空的。但是，console.log始终ngOnInit()记录所有 12 条记录。但它们现在才显示在网格中。

但是bundles.length桌子下面的印刷品 12 -

在此处输入图像描述 我怎样才能解决这个问题？

4

2 回答 2

1

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

在组件类中，我定义了一个默认变量dataAvailable，并在加载数据后设置为。falsetrue

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>

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

于 2018-01-12T19:11:07.273 回答
0

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

我尝试使用setTimeOut，但它没有用。对我有用的是使用解析器。

我写了一个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[] }) => {
            ..
    });
}

现在，导航等待TaxReceiptingBundles 的列表。

于 2017-03-09T17:45:24.927 回答