CODEWITHSUNDEEP
ionic2
Jean-Luc Aubert
Jean-Luc Aubert

Reputation: 620

Ionic ion-list in an ion-item not properly displayed

I have an "ion-list" in an "ion-item" from a parent list in a view. But, the child list doesn't display any data. Here's the code i use to diplay the lists :

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

The ion-list-header is correctly rendered, but the other items are blank.

The "areas" structure on which i loop is an array of objects and seems correct :

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

The screenshot of the result follows :

Items but no content

Someone can help ?

Upvotes: 1

Views: 1038

Answers (1)

Jean-Luc Aubert
Jean-Luc Aubert

Reputation: 620

Okay...

Don't know why the first code doesn't render the way i want... But, i change the view this way :

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

Then, labels and input renders the way i want...

Thx all

Upvotes: 1

Related Questions