时间戳

首页 > 解决方案 > 完成服务调用后加载视图组件（表），该服务调用推送包含表信息的数组

angular - 完成服务调用后加载视图组件（表），该服务调用推送包含表信息的数组

问题描述

我正在构建一个动态表以在我的应用程序中使用。我正在使用@Input 参数发送表格的标题和元素等信息。

这是通用表组件的输入。

@Input()
public listaElementosTabla: any = [];

@Input()
public titulosCabecera = [];

@Input()
public cantidadMaximaRegistros: number;

我用下一种方式调用表格组件：

<tabla-component [listaElementosTabla]="arrayElements"
[titulosCabecera]=headElementsArray cantidadMaximaRegistros=5></tabla-component>

我有一项服务可以将信息从 BD 查询到特定数据，并且我将该信息保存在数组“arrayElements”中。我在 onInit 页面中调用该服务。

ngOnInit() {
     this.myService.queryInfoInBd().subscribe(
        (data: ObjectDTO[]) => {
            data.forEach((objectDTO: ObjectDTO) => {
                this.arrayElements.push(objectDTO);
            });
        },
        error => {
            console.log(error);
        }
    );
}

这里的问题是表组件首先加载服务调用，因此，当组件尝试获取有关arrayElements的信息时，总是为空。

我知道 javascript 是异步的，但我不知道该怎么做才能等到服务完成并且数组加载信息，然后再加载表组件。

标签： angulartypescriptasynchronousinputangular-services

解决方案

将您的 HTML 更改为：

<tabla-component *ngIf="arrayElements" [listaElementosTabla]="arrayElements"
[titulosCabecera]=headElementsArray cantidadMaximaRegistros=5></tabla-component>

就像只有当列表不为空时才会调用表格组件。

推荐阅读