Загрузите компонент представления (таблица) после завершения sh вызова службы, который pu sh массив с информацией для таблицы

Question

Я строю динамическую c таблицу для использования в моем приложении. Я использую параметры @Input для отправки информации, такой как заголовок и элементы для таблицы.

Это входные данные для компонента таблицы generi c.

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

@Input()
public titulosCabecera = [];

@Input()
public cantidadMaximaRegistros: number;

И я вызываю Компонент таблицы следующим образом:

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

У меня есть служба для запроса информации из BD для определенных c данных, и я сохраняю эту информацию в массиве «arrayElements». Я вызываю службу на странице onInit.

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

Проблема здесь в том, что компонент таблицы загружается первым при вызове службы, поэтому, когда компонент пытается получить информацию о arrayElements всегда пусто.

Я знаю, javascript asyn c, но я не знаю, как сделать, чтобы служба закончила работу sh и массив загрузил информацию и после этого загрузите компонент таблицы.

Answer 1

Измените HTML на:

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

Подобно тому, что компонент таблицы будет вызываться, только если список не пуст.

Answer 2

Один трюк - установить «флаг», который показывает или скрывает элемент таблицы.

Примерно так:

по вашему мнению (html)

<div *ngIf="datosCargados"> 
   <!--Se mostrara el elemento dentro del div si esta bandera es True-->
   <tabla-component [listaElementosTabla]="arrayElements"
   [titulosCabecera]=headElementsArray [cantidadMaximaRegistros]=5></tabla-component>
</div>

в вашем .ts

datosCargados: boolean = false; //Por defecto es false para no mostrarse
ngOnInit() {
     this.myService.queryInfoInBd().subscribe(
        (data: ObjectDTO[]) => {
            data.forEach((objectDTO: ObjectDTO) => {
                this.arrayElements.push(objectDTO);
            });
            this.datosCargados = true;
        },
        error => {
            console.log(error);
            this.datosCargados = false;
        }
    );
}

По сути, datosCargos всегда будет иметь значение false (будет скрыто), пока http не подпишется и не получит данные.

Надеюсь, это поможет.