Multiple ngFor in ion-list

The following code is not showing a nice list. At the bottom of the list there is one divider which should not appear. I suspect that it is because of the div

      <ion-list *ngFor="let post of posts">
         <div *ngFor="let comments of post">
           <ion-item *ngFor="comment e of comments">
           </ion-item>
         </div>
       </ion-list>

Is there an element which does not affect nested and parent elements?

PS: This is just a small, simplified example. I know that I could leave away the for-loop in the div but in my real usecase I need it.

I have had all sorts of grief with the * shorthand. I always write out the full code using <template> elements, and that might help you here.

<template ngFor let-post [ngForOf]="posts">
  <ion-list>
  <template ngFor let-comments [ngForOf]="post">
    <template ngFor let-comment [ngForOf]="comments">
      <ion-item></ion-item>
    </template>
  </template>
  </ion-list>
</template>
2 Likes

Thank you! It works like a charm :slight_smile:

Thanks it’s working. but the item scrolling is not working in real device, Please help?