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

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

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

{{area.translations.fr}}
{{'forms.settings.area.followDLC'| translate}}
{{'forms.settings.area.alertBefore'| translate}}
0
7.

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

---

Thx all

只是为了理解，如果我对项目1和项目2进行注释，并且只保留第一个项目，那么头像和标题将正确显示。但是，如果没有*ngFor或其他项目来填充另一个列表，为什么您需要在第一个离子项目内设置一个

离子列表

？

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