javascript - 将 *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 中提取一些值，并将每个对象推送到可以迭代的数组中。首先，使用接口(interface)而不是类，因此您的 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