如何在离子卡中显示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/>"
    ]
}]

现在，当我尝试在 ionic-card-content 中打印成分时，它显示为段落

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

o/p

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

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

Answer 1

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

<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>