Angular 6 - визуализация раскрывающегося списка дочернего компонента после получения данных от службы REST в родительском компоненте

Question

Можете ли вы помочь мне отобразить раскрывающийся список (HTML Select), который присутствует в дочернем компоненте после получения данных в родительском компоненте от внешней службы REST?Я попытался сделать это с помощью @Input, однако проблема в том, что дочерний компонент рендерится даже до того, как данные получены от службы REST, и он не рендерится снова после получения данных, даже используя ловушку ngOnChanges.Можете ли вы сказать мне подходящий способ сделать это в Angular 6?Спасибо.

Answer 1

Вы можете использовать * ngIf Директива для создания экземпляра дочернего компонента после разрешения подписки или при наличии данных.

Component-1

 public response$:Observable<data[]>;
    constructor(public service:ShareService)
      {
          this.response$= this.service.getdata();

      }

Шаблон компонента-1

<ng-container *ngIf="response$">
<hello [response]="response$"></hello>
</ng-container>

Компонент-2

export class HelloComponent  {
@Input() response:Observable<Idata[]>


}

Шаблон компонента-2

<div *ngFor="let item of (response|async)">
  {{item.body}}
<div>

LIVE DEMO

, если вы не хотите использовать async трубу

public response:Array<data>=[];
        constructor(public service:ShareService)
          {
              this.service.getdata().subscribe(value=>this.response=value);

          }

Компонент-1 Шаблон

<ng-container *ngIf="response">
<hello [response]="response"></hello>
</ng-container>

Компонент-2

export class HelloComponent  {
@Input() response:Array<data>


}

Компонент-2 шаблона

<div *ngFor="let item of response">
  {{item.body}}
<div>