Как активировать компонент только при получении данных с сервера?

Question

Существует родительский компонент, где я вызываю его дочерний компонент:

 <app-add-object-layer-component></app-add-object-layer-component>

Дочерний объект имеет службу внутри:

 constructor(private editService: editService) {

 }

 getEditData(){
    return this.editService.get();
 }

Дочерний компонент инициализируется всегда, даже если данные не возвращаются .

Конечно, я могу переместиться на editService вверх и использовать его следующим образом:

<app-add-object-layer-component *ngIf="editService.getEditData()"></app-add-object-layer-component>

Но в этом случае родительский компонент имеет зависимость от инопланетян constructor(private editService: editService) {}

Как показать / скрыть дочерний компонент в родительском компоненте в соответствии с данными, возвращаемыми методом getEditData?

Answer 1

Код неверный. editService.getEditData () вернет обещание. Что определено и верно всегда. Вам необходимо проверить разрешенное значение. Для этого используйте asyn c pipe.

"(editService.getEditData () | asyn c) ?. что-то"

больше: https://malcoded.com/posts/angular-async-pipe/

<app-add-object-layer-component *ngIf="(editService.getEditData() | async)?.something"></app-add-object-layer-component>

Answer 2

объявляем переменную компонента data:any; Затем в ngOnInit() {} получаем эти данные с сервера, используя вашу сервисную функцию, например this.editService.getEditData.subscribe(res=> this.data = res)

, затем в html вы используете их как <app-add-object-layer-component *ngIf="data"></app-add-object-layer-component>