将 *ngFor 与 JSON Angular2 一起使用答案

【问题标题】：Using *ngFor with JSON Angular2将 *ngFor 与 JSON Angular2 一起使用
【发布时间】：2017-05-22 17:15:04
【问题描述】：

我有一个返回的 json 对象：

{
  "data": [
    {
      "type": "product",
      "id": "e0267f46-9721-48fc-8ee0-b554d82cfb52",
      "name": "fwefwefwef", 
...and so on...

我将此作为我服务的一部分进行处理：

export class MService {
...
     products.data.forEach(element => {
     let product = {
             name : element.name, 
             sku : element.sku, 
             description : element.description,
              category : element.relationships.categories.data[0].id,
             price: element.price[0].amount

            console.log(product);
          })
      });
  let product = MService
    });
  }
}

分别返回每个对象：

{
  "name": "Bombay Sapphire",
  "sku": "bomsaph",
  "description": "A great gin",
  "category": "46569361-13477074f952",
  "price": 1999
}

我有一个模型：

export class Prod{

    constructor(public name:string, public sku:string, public description:string, public category: string, public price:number){}

}

而 HTML 中 *ngFor 循环为其返回的 Component 需要显示 API 返回的内容。

constructor (private mService: MService){ 

    products:Prod[] = [MService]
  }

HTML：

  <div *ngFor="let product of products"> 
      <div>{{product.name}} </div>
      <div>{{product.description}}</div>
      <div>{{product.sku}}</div>
    </div>

我在组件中收到“未使用的标签”和“预期的表达式”错误。

【问题讨论】：

你的实际结果是什么？它与您的预期有何不同？此处有限信息的两个可能猜测是 1）您的“产品”对象不是“产品”的直接后代，您需要在您的 ngFor 中尝试“让产品的 products.data”之类的东西 2.）您的 ngFor正在对象而不是数组上运行...这可能会导致一些意外行为。
目前我在“产品”上收到“未使用标签”错误消息（这让我怀疑我没有正确地从 json -> HTML 开始）。 1）这不应该是必需的，因为它通过循环运行并返回上面列出的对。 2）将其转换为数组的最佳方法是什么？ @ryantdecker
在您的组件中，products 被设置为一个数组，其中包含对MService 类的引用。这似乎不对。您需要改用MService 的实例：products = mService.whatever。请注意，我添加了“whatever”b/c，您并没有真正显示 MService 的 API，因此不清楚从哪里获取 Prod 对象数组。
如果你把 {{products |模板中的 json}} 而不是你的 ngFor*，你得到了什么？
@ryantdecker 同样的错误。肯定是“ products:Prod[] = [MService] ”导致了问题。

标签： javascript json angular typescript

【解决方案1】：

您似乎想从对象中的 JSON 中提取一些值，并将每个对象推送到可以迭代的数组中。首先，使用接口而不是类，所以你的Prod 看起来像这样：

export interface Prod{
  name:string;
  sku: string;
  description:string;
  category: string;
  price: number;
}

而不是在您的服务中使用forEach，让我们使用map 来提取您想要的属性，将它们分配给具有Object.assign() 的对象，就像您以前一样与forEach一起使用：

getData(){
  return this.http.get('src/data.json')
    .map(res => res.json().data.map((x:any) => 
       Object.assign({name:x.name,sku:x.sku,description:x.description,category:x.relationships.categories.data[0].id, price:x.price[0].amount})))
}

所以现在当我们在组件中接收数据时，它是一个Prod 类型的数组，您可以在模板中很好地使用它：

products: Prod[];

ngOnInit() {
  this.service.getData()
    .subscribe(data => {
      this.products = data;
    })
}

和模板：

<div *ngFor="let product of products"> 
  <div>{{product.name}} </div>
  <div>{{product.description}}</div>
  <div>{{product.sku}}</div>
</div>

Here's a DEMO 我从您之前的问题中获得了完整的 JSON：here

【讨论】：

感谢您筛选和整理我的无能！
没问题！很高兴我能帮上忙！ :)
AHT_82 。嘿！ Justa 快速跟进，根据您的 Plunkr，我的工作正常，但不得不稍微调整一下：[link] (imgur.com/a/cZgw6)。一如既往地出错 - 你介意看看吗？
嘿！从this.moltinService.getData; 中删除;，你应该很高兴:)
嘿！ @AHT_82 。谢谢你的回复。我得到这个错误？这是因为我在返回身份验证响应之前发送数据请求吗？ link