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指令，请参阅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>

如何在离子卡中显示json内的数组

2 个答案: