Как мне назвать два разных старших чарта при ионном переключении?

Question

Мне нужно показать два разных графика на ion-toggle, тогда как я могу показать два разных текста на ионном переключателе, но я не могу показать два разных highcharts на ion-toggle?

<ion-grid>
    <h3 class="branch-income">{{ isOnline ? 'Least' : 'Top' }} 5 Branches Income

        <ion-toggle (ionChange)="updateDriverOnlineStatus($event)"  [checked]="isOnline" class="switch-btn"></ion-toggle>

    <h1 *ngIf="isOnline">
    <div class="chart-holder">
        <div id="container99"></div>
    </div>
     </h1>
    <h1 *ngIf="isOnline==false">     
        <div class="chart-holder">
            <div id="container88"></div>
        </div>
    </h1>
    </h3>


</ion-grid>

Answer 1

В компоненте:

public model = {
   toggleFlag: false
};

В html:

<div> 
  <ion-toggle [(ngModel)]="model.toggleFlag"></ion-toggle>

  <div [hidden]="model.toggleFlag"> 
    <div class="chart-holder">
        <div id="container99"></div>
    </div>
  </div> 

  <div [hidden]="!model.toggleFlag"> 
    <div class="chart-holder">
        <div id="container99"></div>
    </div>
  </div> 

</div>

Демо здесь

Используйте скрытое свойство, которое показывает и скрывает от глаз, но диаграмма будет там, но будет скрыта.

Answer 2

Просто добавьте [(ngModel)]="isOnline" к вашему элементу переключателя, он получит значение этого переключателя, и вы можете соответствующим образом добавить к своей логике. Спасибо

<ion-grid>
   <h3 class="branch-income">
      {{ isOnline ? 'Least' : 'Top' }} 5 Branches Income
      <ion-toggle (ionChange)="updateDriverOnlineStatus($event)" 
      [(ngModel)]="isOnline" [checked]="isOnline" class="switch-btn"></ion-toggle>
      <h1 *ngIf="isOnline">test1</h1>
      <h1 *ngIf="isOnline==false">test2</h1>
   </h3>
</ion-grid>