具有标题ionic3的虚拟滚动

Question

我无法对以下列表进行虚拟滚动。让我知道是否有人实现了这一目标。

我尝试过，但是我没有办法设置标题。 检查stackblitz https://stackblitz.com/edit/ionic-bhrqdm?file=pages%2Fhome%2Fhome.ts？

<ion-list [virtualScroll]="showListing" [headerFn]="myHeaderFn" approxItemHeight="50px">

  <ion-item-divider *virtualHeader="let header">
    Header: {{ header.name }}
  </ion-item-divider>

  <ion-item *virtualItem="let item">
    Item: {{ item.name }}
  </ion-item>

</ion-list>

这是我从后端获取的数组列表

public showListing: any[] = [
    {
      id:1,
      name:'Header1',
      list: [{
        id:10,
        name:'list1',
      },
      {
        id:11,
        name:'list2'
      }
      ]
    },
       {
      id:2,
      name:'Header2',
      list: [{
        id:20,
        name:'list20',
      },
      {
        id:21,
        name:'list21'
      },
         {
        id:22,
        name:'list22'
      }
      ]
    }
    ,   {
      id:3,
      name:'Header3',
      list: [{
        id:30,
        name:'list30',
      },
      ]
    },
      {
      id:3,
      name:'Header4',
      list: [{
        id:40,
        name:'list40',
      },
      {
        id:41,
        name:'list41'
      },
        {
        id:42,
        name:'list42'
      },
        {
        id:43,
        name:'list43'
      },
        {
        id:44,
        name:'list44'
      }
      ]
    }
  ]

它应该设计成

Header1
  list1
  list2
Header2
  list20
  list21
  list22
Header3
  list30
Header4
   list40
   list41
   list42
   list43
   list44

嵌套虚拟滚动也无法正常工作，请检查stackblitz https://stackblitz.com/edit/ionic-8bbukk?file=pages%2Fhome%2Fhome.html吗？