更改切换离子按钮时显示的文本

Question

当我在离子应用程序中切换离子切换按钮时，我正在尝试将显示的文本从“联机”更改为“脱机”。这是我的html代码

 <ion-label color="light" *ngIf="!isOnline">Go Online</ion-label>
    <ion-label color="light" *ngIf="isOnline">Go Offline</ion-label>


  <ion-toggle (ionChanges)="updateDriverOnlineStatus($event)" [checked]="isOnline"></ion-toggle>

这是我的打字稿文件

public isOnline: boolean = false;


updateDriverOnlineStatus($event)
  {
  this.isOnline = !this.isOnline;
  }

我该怎么办？

Answer 1

您必须将事件的名称从ionChanges更改为ionChange：

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

Answer 2

尝试将事件名称更改为ionChange，而不是ionChanges：

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

此外，您只需执行以下操作即可：

<ion-label color="light">{{ isOnline ? 'Go Offline' : 'Go Online' }}</ion-label>

这是您推荐的Sample StackBlitz。