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循环返回的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>

我在组件中收到'unused label'和'expression expected'错误。

Answer 1

似乎你想从对象中的JSON中提取一些值，并将每个对象推送到一个可以迭代的数组中。首先，使用interface而不是class，因此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>

Here's a DEMO ，我从上一个问题中获得了完整的JSON： here

使用* ngFor和JSON Angular2

1 个答案: