我想实现ion-segment有多个页面，每个页面都有上拉和下拉刷新，代码如下：

<ion-header>
 <ion-navbar color="primary">
   <ion-title>
     跳蚤市场
   </ion-title>
 </ion-navbar>

 <ion-toolbar no-border-top>
   <ion-segment [(ngModel)]="service">
     <ion-segment-button value="all">
       全部
     </ion-segment-button>
     <ion-segment-button value="digital">
       数码
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>
</ion-header>

<ion-content class="fleamarket-page">
 <div [ngSwitch]="service">
   <div *ngSwitchCase="'all'">
     <ion-refresher (ionRefresh)="doRefresh($event)">
       <ion-refresher-content
         pullingIcon="arrow-round-down"
         pullingText="下拉可以刷新"
         refreshingSpinner="circles"
         refreshingText="正在刷新数据中">
       </ion-refresher-content>
     </ion-refresher>

     <ion-list no-lines>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Ruby</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Oscar</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Zoey</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Otto</h2>
       </ion-item>
     </ion-list>

     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content
         loadingSpinner="bubbles"
         loadingText="正在加载更多数据...">
       </ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </div>

   <div *ngSwitchCase="'digital'">
     <ion-refresher (ionRefresh)="doRefresh($event)">
       <ion-refresher-content
         pullingIcon="arrow-round-down"
         pullingText="下拉可以刷新"
         refreshingSpinner="circles"
         refreshingText="正在刷新数据中">
       </ion-refresher-content>
     </ion-refresher>

     <ion-list no-lines>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Ruby</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Oscar</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Zoey</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Otto</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Ruby</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Oscar</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Zoey</h2>
       </ion-item>
       <ion-item>
         <ion-thumbnail item-left>
           <img src="assets/images/3.jpg">
         </ion-thumbnail>
         <h2>Otto</h2>
       </ion-item>
     </ion-list>

     <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content
         loadingSpinner="bubbles"
         loadingText="正在加载更多数据...">
       </ion-infinite-scroll-content>
     </ion-infinite-scroll>
   </div>
 </div>
</ion-content>

但是下拉的时候显示空白

请教老师给个思路，谢谢？