将 *ngFor 与 JSON Angular2 结合使用

Question

我有一个返回的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 循环返回的组件需要显示 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>

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

Answer 1

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

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

而不是在您的服务中使用forEach，让我们只使用 map 来提取您想要的属性，将它们分配给带有 Object.assign() 的对象，int 与您使用 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>

这是一个演示，我从您之前的问题中获得了完整的 JSON：这里