Question

在外部REST服务的父组件中收到数据后，您能否帮我呈现子组件中存在的下拉列表（HTML Select）？我尝试使用@Input进行此操作，但是，问题是即使在从REST服务接收数据之前，子组件也在呈现，并且即使使用ngOnChanges挂钩也不会在收到数据后再次呈现。你能告诉我在Angular 6中渲染这个的合适方法吗？谢谢。

Answer 1

您可以使用 *ngIf 指令在解析订阅或数据可用后实例化子组件。

<强>组件-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>

Angular 6 - 在父组件中从REST服务接收数据后，在子组件中呈现下拉列表

1 个答案: