Question

我正在从提供程序中的api获取数据，并且我想显示来自此端点的元素的详细信息：https://jsonplaceholder.typicode.com/posts/3

我正在使用Promise方法获取数据，我想通过其他方法通过id获取元素：

getPostByID(id){
    for( var i=0; i < ( this.getPosts().length ); i++){
      if (this.getPosts[i].id == id) {
        return Promise.resolve(this.getPosts[i]);
      }
    }
  }

获取所有数据的方法是：

getPosts(){
    return new Promise(resolve => {
      this.http.get(URLS.POSTS).subscribe(data => {
        resolve(data);
      }, err =>{
        console.log(err);
      });
    });
  }

我收到此错误：

类型“ Promise <{}>”上不存在属性“ length”。

Answer 1

错误说明了一切。 length上没有Promise<T>。您需要通过getPostByID方法返回承诺。我建议reading about Promise and how it works。

  getPostByID(id){
    for( var i=0; i < ( this.getPosts().length ); i++){
      if (this.getPosts[i].id == id) {
        return this.getPosts[i]
      }
    }
  }

现在，当您使用此数据时，需要使用.then：

this.service.getPostByID(id).then(data => {
  this.post = data
})

您可以在模板中显示它：

{{ post | json }}

您可能想在数据加载时添加一些加载状态。

this.isLoading = true
this.service.getPostByID(id).then(data => {
  this.isLoading = false
  this.post = data
})

在模板中：

<div class="loading" *ngIf="isLoading">Loading...</div>
<div class="content" *ngIf="!isLoading">
  {{ post | json }}
</div>

此外，在Angular中使用RxJS的Observables比使用Promise更为习惯，因此您可能应该检查一下它是如何工作的-没什么不同，但功能更强大。

获取Promise在离子框架上返回的元素数

1 个答案: