Блог

Главная - Вопросы по программированию - Как мне вызвать две разные старшие диаграммы в ion-toggle?

Как мне вызвать две разные старшие диаграммы в ion-toggle?

#angular #ionic-framework #ionic3

#angular #ionic-framework #ionic3

Вопрос:

Мне нужно показать две разные диаграммы ion-toggle , в то время как я могу показать два разных текста в 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>

Комментарии:

1. где ваш хай-чарт в html?

2. я добавил сейчас, хотя он показывает ошибку верхних диаграмм # 13.

Ответ №1:

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

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

Комментарии:

1. ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. Предыдущее значение: ‘проверено: true’. Текущее значение: ‘проверено: false’. (Эта ошибка показывает bro)

2. попробуйте изменить переменную следующим образом isOnline: boolean = false;

3. @stephen не могли бы вы, пожалуйста, загрузить свой соответствующий код сюда stackblitz.com/fork/ionic

Ответ №2:

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

 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>

Демонстрация здесь

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

Комментарии:

1. это не будет работать в обрезанном коде, потому что angular настроен.

2. Единственная рабочая вещь — это <h1> div, но я не могу просмотреть диаграмму, может быть, пожалуйста, помогите получить диаграмму на ion toggle?

3. я думаю, что ваша проблема заключается и в чем-то другом. ответ для переключения, который работает. проверьте демонстрацию.

4. Я загружаю графики одновременно, в то время как ion-toggle работает для <h1> div, но диаграмма не работает при ion-toggle, оба графика уже загружены. любая помощь??

5. загрузить первую диаграмму и загрузить вторую диаграмму пользователь включает переключение

Метки: