* ngIf always shows me a second the div that hidden in ionic

I'm trying to show an image if a boolean is false so I'm using ngIf, the only problem is that when the boolean is true it shows me a second the image and then it changes to the div that is displayed when the boolean is false, I share the code:

<ng-template #sinPedido>
        <img  src="./assets/images/carritoVacio.jpg">
    </ng-template>




 <ion-list *ngIf="hayPedido; else sinPedido" color="roga" class="my-ion-list">

        <ion-item-sliding *ngFor="let pedido of detallePedido;let i = index">

            <ion-item no-lines >

                <ion-icon *ngIf="checked" class="colorIcono" name="remove-circle" (click)="eliminarItem(i)" item-start></ion-icon>

               <ion-card padding-no>

                  <div class="card-title"> {{pedido.cantidad}}{{pedido.item.nombre}}
                      ${{pedido.item.precio}}</div>

                </ion-card>

            </ion-item>

            <ion-item-options side="right">
              <button ion-button color="danger" (click)="eliminarItem(i)">Eliminar</button>
            </ion-item-options>


        </ion-item-sliding>


      </ion-list>

I add the part of ts:

hayPedido = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, public toastCtrl: ToastController,
  public http:Http,platform: Platform,private statusBar: StatusBar) {


  }

  ionViewDidLoad() {

  }
  ionViewDidEnter(){  
    this.pedidos=  null;
    this.pedidos= JSON.parse(localStorage.getItem("pedido")); 
    if(this.pedidos){
      if(this.pedidos!=null){
        this.detallePedido=this.pedidos.detallesPedido; 
        this.botonesDeshabilitados = false;
        this.hayPedido = true;

      }

    }


  }