Question

我一直在努力访问我的API响应，如下所示：

{
  "products": [
  {
    "creationDate": "2018-09-18T23:44:38.062Z",
    "_id": "5ba18dea6d29622f1c539674",
    "name": "Sample 1",
    "description": "some description goes here for sample product",
    "count": 3,
    "__v": 0
  },
  {
    "creationDate": "2018-09-18T23:44:38.062Z",
    "_id": "5ba18e756d29622f1c539675",
    "name": "Sample 3",
    "description": "some description goes here for sample product",
    "count": 3,
    "__v": 0
  }
  ]
}

这是通过以下服务调用中的方法检索的：

getAll(){
  return this.http.get('https://jsonplaceholder.typicode.com/posts')
        .map(response => response);
}

在这里我在组件中称呼它：

ngOnInit() {
  this.newService.getAll().subscribe(data => 
    {
      this.Repdata = data.json();
      this.Repdata = Array.of(this.Repdata);
      console.log(data)
    }
)}

这是在我的组件html中显示的位置：

<p *ngFor="let key of Repdata">
  <span>   
    sample |{{key.name}}
  </span>
</p>

我的HTML输出中没有任何显示。我在做什么错了？

Answer 1

首先，我假设您使用的是相对较新的Angular版本，例如5或6。

您的“ http”类应该是HttpClient，这意味着您正在导入HttpClientModule。

然后，摆脱http.get（）之后的.map()调用，因为它仍然不执行任何操作（map response => response并没有改变任何内容）。

您的服务方法应如下：

getAll() {
 return this.http.get('https://jsonplaceholder.typicode.com/posts');
}

接下来，如果尚未定义一个对象，该对象与json数组中的一项匹配，例如

export class Product {
      creationDate: Date;
      _id: string;
      name: string;
      description: string;
      count: number;
      __v: number;
}

然后，您可以返回并修改您的服务呼叫，如下所示：

getAll(): Observable<Product[]> {
 return this.http.get<Product[]>('https://jsonplaceholder.typicode.com/posts');
}

这将导致httpClient将结果转换为Product数组，并返回Product数组的Observable。

然后，您的组件代码变为：

products: Product[];

ngOnInit() {
  this.newService.getAll().subscribe(products => 
    {
      this.products = prodcuts;
      console.log(`got products: ${JSON.stringify(this.products)}`);
    }
)}

您的模板将是：

<p *ngFor="let product of products">
  <span>   
    sample | {{product.name}}
  </span>
</p>

最后一件事-您的示例中的jsonplaceholder URL不返回代码中的数据结构。如果那是一个错字，或者只是您实际URL的替代品，因为您不想显示您的实际URL，那就太好了。但是，如果要使用该确切的URL，将把Product对象更改为与实际返回的数据匹配的Post对象。

这是一个StackBlitz示例：https://stackblitz.com/edit/angular-fo3bin

循环访问时无法访问Angular API响应

1 个答案: