Question

我试图列出一些使用laravel构建的API的评论，以显示一些关于某些餐点的评论，一个关于评论消息的幻灯片，以及您在对象数组中看到的一些数据。

{

    "2": {
        "reviews": [
            {
                "id": 2,
                "title": "Trop bon !",
                "author": 1,
                "text": "Trop bon ! 11 Trop bon !Trop bon !Trop bon !Trop bon !",
                "picture": "",
                "rating": 4.5
            },
            {
                "id": 3,
                "title": "Review 2",
                "author": 1,
                "text": "another review",
                "picture": "",
                "rating": 3
            }
        ],
        "data": {
            "restaurant": {
                "restaurant_id": 1,
                "restaurant_logo": "http://3.bp.blogspot.com/-Oz5XdPqGddQ/ULy9zwbIDXI/AAAAAAAAPio/HZwYtIr7DfE/s1600/22-restaurant-logo-design.jpg",
                "restaurant_title": "Resto BenArus",
                "restaurant_type": "Fast Food",
                "restaurant_lat": "36.7465169",
                "restaurant_lng": "10.2171373",
                "user_distance": 9.3072696748262
            },
            "meal": {
                "id": 2,
                "meal_title": "Spaghetti Bolonaise",
                "price": 50,
                "meal_description": "Epic !",
                "reviews_count": 2,
                "overall_rating": 3.75
            }
        }
    },
    "3": {
        "reviews": [
            {
                "id": 4,
                "title": "Total",
                "author": 1,
                "text": "cristifant ",
                "picture": "https://www.gravatar.com/avatar/d9625431c20a1565a2e06f811a95c36c?s=140&d=retro",
                "rating": 3
            }
        ],
        "data": {
            "restaurant": {
                "restaurant_id": 2,
                "restaurant_logo": "http://3.bp.blogspot.com/-Oz5XdPqGddQ/ULy9zwbIDXI/AAAAAAAAPio/HZwYtIr7DfE/s1600/22-restaurant-logo-design.jpg",
                "restaurant_title": "resto 2",
                "restaurant_type": "Fast Food",
                "restaurant_lat": "10",
                "restaurant_lng": "32",
                "user_distance": 3701.7730713836
            },
            "meal": {
                "id": 3,
                "meal_title": "Hamburger",
                "price": 12,
                "meal_description": "",
                "reviews_count": 1,
                "overall_rating": 3
            }
        }
    }

}

我创建了一个Pipe来迭代结果：

   transform(value, args:string[]):any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }

但它没有给出任何更好的结果，我得到的只是数组的第一个键：

如何显示数据（不太确定这是正确的方法）：

    <ion-content padding>
  <ion-list *ngFor="let data of search | keyobject " no-lines>
    <ion-list *ngFor="let data2 of data | keyobject " no-lines>
      <ion-item>Value: {{ data2.value }} {{ data2.key }}</ion-item>
      <ion-list *ngFor="let data3 of data2 | keyobject " no-lines>
        <ion-item>Value: {{ data3.value }} {{ data3.key }}</ion-item>
      </ion-list>
    </ion-list>
  </ion-list>
</ion-content>

Answer 1

<ion-row  responsive-sm wrap *ngFor="let data of meals | ArrayObject " >
    <ion-col >
      <ion-card>
        <ion-row>
          <ion-col col-12 no-margin no-padding>
            <ion-slides>
              <ion-slide *ngFor="let reviews of data.value['reviews'] | ArrayObject " >
                <img src="{{reviews.value['picture']}}"/>
                <h1>{{reviews.value['title']}}</h1><small>{{reviews.value['author']}}</small>
              </ion-slide>
            </ion-slides>
          </ion-col>
          <ion-col col-12 no-margin no-padding>
            <ion-card-content>
              <ion-card-title>
                {{data.value['meal']['title']}}
              </ion-card-title>
              <p>
                <small><rating [score]="data.value['meal']['overall_rating']" [max]="5"></rating> ({{data.value['meal']['reviews_count']}}) Avis</small>
              </p>
            </ion-card-content>
          </ion-col>
        </ion-row>
      </ion-card>
    </ion-col>
  </ion-row>

问题中的一个与此之间的区别仅仅是在我直接转换数组的问题上，但在这里，我使用数组元素作为值，然后在知道它们之后转换它们（例如：{{ 1}}）

在Ionic 2＆amp;中迭代一组物体。 AngularJS 2

1 个答案: