Question

在我的父组件中，我在数据库中查询compile()：

的数组

clients

我的this.clientService.get("/dashboard?start_date=2017-11-07", this.current_user.auth_token).subscribe( data => { this.clients = data console.log(data) loader.dismiss() }, err => loader.dismiss() )功能是：

clientService.get()

最后，我的观点是：

get(url, token):Observable<Response> {
  let headers = new Headers();
  headers.append("authentication", token );
  let options = new RequestOptions({ headers: headers });

  let final_url = `${this.baseUrl}${url}`

  return this.http.get(final_url, options)
    .map(this.extractData)
    .catch(this.handleError)
}

在我的孩子中，我致电<approval-card *ngFor="let client of clients" [client]="client"> </approval-card>并收到错误，因为client.name尚未定义。

client

如何重构以解决对我的服务器的异步调用？

Answer 1

来自输入的数据应该在ngOnInit生命周期钩子

中可用

export class ApprovalCardComponent implements OnInit {
  @Input() client: any;
  name: string;

  constructor() {
   
  }
  
  ngOnInit() {
   this.name = this.client.name
  }
}

this.observableClients = this.clientService.get("/dashboard?start_date=2017-11-07", this.current_user.auth_token);

<approval-card *ngFor="let client of observableClients | async"
   [client]="client">
</approval-card>

您现在可能遇到的唯一问题是无法解除加载程序。

Answer 2

为什么不等到clients解决之后。此外，您还可以使用异步管道等待可观察的。

<div *ngIf="clients">
    <approval-card *ngFor="let client of clients | async"
        [client]="client">
    </approval-card
</div>

正如其他答案所示，请转到ngOnInit()而不是constructor。

Answer 3

最简单的方法是：

<ng-container *ngIf="clients">
  <approval-card *ngFor="let client of clients"
    [client]="client">
  </approval-card>
</ng-container>

Answer 4

想到我会再回答一个问题。组件初始化的顺序如下：constructor -> OnChanges -> OnInit -> ...。

通常在OnInit中可以获得从父级传递给子级的数据，但在这种情况下，由于这是异步的，因此可能没有时间传递给子级。所以除了提供的答案之外，你可以做的是使用OnChanges ......来自docs ......

Angular在检测到组件（或指令）的输入属性的更改时调用其ngOnChanges()方法

所以你可以使用生命周期钩子，但也需要检查client是否存在：

ngOnChanges() {
  if(this.client) {
    this.name = this.client.name
  }
}

Angular：将异步数据传递给子级

4 个答案: