离子项中的离子离子列表未正确显示

时间:2017-09-27 13:40:56

标签: ionic2

我有一个"离子列表"在"离子项"来自视图中的父列表。但是,子列表不显示任何数据。这是我用来显示列表的代码:

[{"id":1,"type":"area","translations":{"fr":"Frigo","en":"Fridge"},"stats":{"totalProducts":5,"totalQuantity":5,"stockPrice":null,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"frigo.png","_id":"1","_rev":"50-55c270db9c0ac62ae8e378e1773a390c","followDLC":true,"alertBefore":7},

{"id":2,"type":"area","translations":{"fr":"Congélateur","en":"Freezer"},"stats":{"totalProducts":5,"totalQuantity":1,"stockPrice":4.99,"alertOnPeremption":0,"alertOnStockLevel":1},"logo":"congelateur.png","_id":"2","_rev":"19-307ca9a1882e4c1781cad5b062cdd920","followDLC":false,"alertBefore":0},

{"id":3,"type":"area","translations":{"fr":"Garde-Manger","en":"Pantry"},"stats":{"totalProducts":11,"totalQuantity":5,"stockPrice":25.48,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"garde-manger.png","_id":"3","_rev":"118-2746786125e84ae31dd9bfaaecd73118","followDLC":false,"alertBefore":0}]

正确渲染了ion-list-header,但其他项目为空白。

"区域" i循环是一个对象数组的结构,看起来是正确的:

request.contentLength = UTF8.encode(data).length; 

结果的屏幕截图如下:

Items but no content

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

好了...

不知道为什么第一个代码没有呈现我想要的方式......但是,我这样改变了视图:

    <ion-item-group *ngFor="let area of areas">
      <ion-item-divider color="light">
          <ion-avatar>
            <img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
          </ion-avatar>
          <h2>{{ area.translations.fr }}</h2>
      </ion-item-divider>

      <ion-item>
          <ion-label item-left stacked>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
          <ion-toggle item-right [(ngModel)]="area.followDLC" [checked]="area.followDLC" color="primary"></ion-toggle>
      </ion-item>

      <ion-item>
          <ion-label  item-left stacked>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
          <ion-range item-right min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
            <ion-label range-left>0</ion-label>
            <ion-label range-right>7</ion-label>
          </ion-range>
        </ion-item>
      </ion-item-group>

然后,标签和输入呈现我想要的方式......

全部