イオン2セグメントがGoogleマップで動作しない

Question

イオンは2つのセグメント（マップとリスト）としてGoogleマップを実装しようとしています。ここで

は私のHTMLです：

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

私はアプリケーションをロードすると、リストのセグメントが正常に動作しますが、マップは白い画面として表示されます。ここでは

<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> 

は私.scssファイルです。私がマップdivタグをion-contentタグの直後に定義すると、マップは両方のセグメントに表示されます。 1セグメントの地図と他のセグメントのリストはどのようにすることができますか？

Answer 1

マップを含むdivの高さは0 pxなので、マップは表示されません。

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

をしてからCSS/SASS/LESSで100％の高さに.MAP-ラッパークラスを設定します。そのような何かにあなたのコードを変更します。