如何在离子卡中显示json内部的阵列

Question

考虑下面的json数据

    [{
    "id":"1",
    "name": "abc",
    "url": "www.abc.com",
    "img":"abc.jpeg",
    "yield": "12",
    "ingredients":[
      "1 cup Rice flour<br/>",
      "2 cups Water<br/>",
      "1 teaspoon Cooking oil<br/>",
      "1/2 teaspoon Salt<br/>",
      "1 cup Fresh coconut , grated<br/>",
      "1/2 cup Jaggery<br/>",
      "1 teaspoon Cardamom Powder<br/>"
    ]
}]

现在，当我试图打印离子卡片内容中的成分时，它显示为段落。

 <ion-card-content class="item item-text-wrap">{{ recepie.ingredients }

o/p

1杯米粉，2杯水，1茶匙食用油，1/2茶匙盐，1杯新鲜椰子，磨碎，1/2杯果酱，1茶匙豆蔻粉

但我需要在离子卡的每一行打印这些成分。带分隔器

Answer 1

您可以使用*ngFor指令，请参阅文档。

<ion-card-content class="item item-text-wrap">
  <p *ngFor="let ingredient of recepie.ingredients">{{ ingredient }}</p>
</ion-card-content>

Answer 2

对于您的json文件，因为您的json文件数据在数组中；

myData= [
  {
    "id":"1",
    "name": "abc",
    "url": "www.abc.com",
    "img":"abc.jpeg",
    "yield": "12",
    "ingredients":[
      "1 cup Rice flour<br/>",
      "2 cups Water<br/>",
      "1 teaspoon Cooking oil<br/>",
      "1/2 teaspoon Salt<br/>",
      "1 cup Fresh coconut , grated<br/>",
      "1/2 cup Jaggery<br/>",
      "1 teaspoon Cardamom Powder<br/>"
    ]
 },
 {
    "id":"2",
    "name": "xyz",
    "url": "www.xyz.com",
    "img":"xyz.jpeg",
    "yield": "12",
    "ingredients":[
      "3 cup Rice flour<br/>",
      "1 cups Water<br/>",
      "1 teaspoon Cooking oil<br/>",
      "3/2 teaspoon Salt<br/>",
      "2 cup Fresh coconut , grated<br/>",
      "1/2 cup Jaggery<br/>",
      "1 teaspoon Cardamom Powder<br/>"
    ]
 }
]

html代码必须是这样的

<ion-card-content class="item item-text-wrap" *ngFor= let item of myData>
  <p *ngFor="let ingredient of item.ingredients" class= >{{ ingredient }}</p>
</ion-card-content>