İyonik 2 Segmentler Google Haritalar ile çalışmıyor

Question

Google Maps'i Segmentler (Harita ve Liste) olarak iyonik 2'de uygulamaya çalışıyorum. i App yüklediğinizde

#map { 
    width: 100%; 
    height: 100%; 
    } 

, Liste segmenti çalışıyor ancak Maps beyaz ekran olarak görüntülenir:

<ion-header> 
    <ion-navbar> 
    <button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 

    <ion-segment [(ngModel)]="clients"> 
     <ion-segment-button value="map"> 
     Map 
     </ion-segment-button> 
     <ion-segment-button value="list"> 
     List 
     </ion-segment-button> 
    </ion-segment> 
     </ion-navbar> 
</ion-header> 
<ion-content> 
    <div [ngSwitch]="clients"> 
    <div *ngSwitchCase="'map'"> 
     <div #map id="map"></div> 
    </div> 

    <ion-list *ngSwitchCase="'list'"> 
     <ion-item> 
     <h2>List Item 1</h2> 
     </ion-item> 


</ion-list> 
    </div> 
</ion-content> 

İşte benim .scss dosyasıdır:

İşte benim HTML. İyon içerik etiketinin hemen arkasındaki haritaları div etiketinde tanımlarsam, haritalar her iki segmentte de görüntülenir. Haritalar'ı 1 segmentte ve diğer segmentte nasıl bulabilirim?

Answer 1

Haritanın bulunduğu div'un yüksekliği 0 px'dir, bu nedenle harita görünmez.

<div class="map-wrapper" [ngSwitch]="clients"> 
    <div *ngSwitchCase="'map'" #map id="map"></div> 
</div> 

Ve sonra CSS/SUKDÖ'nün/AZ içinde% 100'lük bir yüksekliğe .map-sarıcı sınıfını ayarlayın: böyle bir şey için kodunuzu değiştirin.