Question

我只想从外部API检索数据，然后显示此数据。我认为的问题是我“太迟”获得了该数据，这意味着在我的代码中，我试图在这些数据准备好之前将其可视化。这可能是由于HttpClient.get（）是异步的。

1）服务：

getListaMetroObservable(): Observable<Metro[]> {
  return this.http.get(this.api)
    .map(this.mapper)
    .catch(this.handleError);
  }

  private mapper(current) {
    console.log(current); // I see data here
    return current as Metro[];
  }

  private handleError(error: any) {
    return Observable.throw(error.message || error);
  }

2）使用该服务的组件：

constructor(private service: MyserviceService) {
    this.listametro = [];
  }

  ngOnInit() {
    this.getListaMetroObservable();
    console.log(this.listametro); // I get empty array
    this.metro = this.listametro[0];
  }

  getListaMetroObservable() {
    this.service.getListaMetroObservable()
      .subscribe(
        risp => this.listametro = risp,
        error => this.errorMsg = error
      );
  }

3）在组件模板中：

<p>element: {{metro.idt}}</p>

我想看看数组“ listametro”的第一个元素。由于数组中没有任何元素，因此我得到null。我该如何解决这个问题？

预先感谢

Answer 1

您可以使用异步管道并避免订阅，使用异步管道将自动为您取消订阅，请尝试以下操作：从'rxjs'导入{Observable};

listametro: Observable<Metro[]>

constructor(private service: MyserviceService) {
  this.listametro = this.service.getListaMetroObservable();
}

并以这种方式在您的模板中显示

<p>element: {{(listametro | async)[0]?.idt}}</p>

Answer 2

更改此

  getListaMetroObservable() {
    this.service.getListaMetroObservable()
      .subscribe(
        risp => this.listametro = risp,
        error => this.errorMsg = error
      );
  }

对此：

  getListaMetroObservable() {
    this.service.getListaMetroObservable().subscribe(result=>{
         console.log(result)
         this.listametro = result
      },error=>{
         console.log(error);
       });
  }

告诉我您在console.log(result)这一行中看到的内容

Answer 3

您在ngOnInit()上执行的操作不会等待在subscribe()中执行的代码。这就解释了为什么控制台不打印任何内容。

就像您分配this.metro时一样，它不在subscribe()中，即使您在getListaMetroObservable()调用之后调用它，它也不会等待订阅本身。

尝试这样的事情：

  getListaMetroObservable() {
    this.service.getListaMetroObservable()
      .subscribe(
        risp => 
        {
          this.listametro = risp;
          console.log(this.listametro);
          this.metro = this.listametro[0];
        },
        error => this.errorMsg = error
      );
  }

如何以角度显示仅从httpClient.get（）获得的数据？

3 个答案: