首页 文章

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

提问于
浏览 次
1

我在视图中的父列表中的“离子项”中有一个“离子列表” . 但是，子列表不显示任何数据 . 这是我用来显示列表的代码：

<ion-list>
    <ion-list-header>
      {{ 'forms.settings.areas' | translate }}
    </ion-list-header>

    <ion-item *ngFor="let area of areas">
      <ion-list>
        <ion-item  class="item-thumbnail-left">
          <ion-avatar>
            <img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
          </ion-avatar>
          <h2>{{ area.translations.fr }}</h2>
        </ion-item>

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

        <ion-item *ngIf="area.followDLC">
            <ion-label floating>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
            <ion-range 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-list>
    </ion-item>
</ion-list>

ion-list-header已正确呈现，但其他项目为空白 .

i循环的“区域”结构是一个对象数组，看起来是正确的：

[{"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}]

结果的屏幕截图如下：

Items but no content

有人可以帮忙吗？

ionic2

1 回答

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

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

    大家好

    回复于

相关问题