Изменить цвет кнопки после успешной функции обратного вызова выполняется в Ionic/Angular 2

Question

Прежде всего, я программирую noob, я пытаюсь создать ионное приложение для отправки команд в arduino через bluetooth.

<ion-content padding> 

    <div padding> 

     <div ion-button clear block medium> 
      <a ion-button color="energetic" outline full (click)="tab=1" [outline]="tab==2"> Slider</a> 
      <a ion-button color="danger" full [outline]="tab==1" (click)="tab=2"> Position</a> 
     </div> 
    </div> 
<div [hidden]="tab==2"> 
    <ion-card> 
    <ion-card-header text-center> 
     <h2>Turn Light ON/OFF</h2> 
    </ion-card-header> 
    <ion-card-content> 

     <div text-center> 
     <button ion-button icon-left color="primary" round (click)="toggle()" large> 
         <ion-icon name="ios-sunny-outline"></ion-icon> 
         ON/OFF 
         <ion-icon name="sunny"></ion-icon> 
        </button> 

     </div> 


     <ion-list> 
     <ion-item> 
      <ion-label> OFF/ON </ion-label> 
      <ion-toggle checked="false" (ionChange)="toggle()"></ion-toggle> 
     </ion-item> 
     </ion-list> 



    </ion-card-content> 
    </ion-card> 
</div> 
<div [hidden]="tab==1"> 
<div text-center> 

    <button ion-button icon-left color="dark" round outline (click)="Enable()"> 
    <ion-icon name="bluetooth" color="danger"></ion-icon> 
    Show Bluetooth List 
</button> 
    </div> 

    <ion-card> 
    <ion-list *ngFor="let list of lists"> 
    <button ion-item (click)="connect(list.address)"> 
     <ion-icon name="bluetooth" item-left></ion-icon> 
     {{list.name}} 
    </button> 
    </ion-list> 
    </ion-card> 
    <ion-card> 
    <ion-card-header text-center color="danger"> 
    Status 
    </ion-card-header> 
    <ion-card-content text-center> 
    {{status}} 
    </ion-card-content> 
    </ion-card> 

</div> 
</ion-content> 

Эта функция итерация через спаренные устройства и всякий раз, когда я нажимаю на определенной кнопке/устройстве, подключение() функция вызывается, и на связи вызова успеха назад функцию excuted.

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 

}) 
export class HomePage { 

    constructor(public navCtrl: NavController) { 

    } 


public tog: any = 'OFF'; 
public tab= 1; 

    toggle() { 
    switch (this.tog) { 
     case 'ON': 
     this.Write('OFF'); 
     this.tog = 'OFF'; 

     break; 
     case 'OFF': 
     this.Write('ON'); 
     this.tog = 'ON'; 

     default: 
     break; 
    } 
    } 

    status : any; 
    lists : any ; 
    Enable(){ 

    BluetoothSerial.isEnabled().then((data)=> { 
     this.status = 'Bluetooth is ON'; 
     BluetoothSerial.list().then((allDevices) => {    
      this.lists = allDevices; 
     }); 
     BluetoothSerial.discoverUnpaired().then((devices)=>{ 
      this.lists.push(devices); 
      this.status= 'discovered some devices'; 
     }).catch((err)=> { this.status= 'No devices were found'; }); 
    }).catch((error)=>{ this.status='Bluetooth is not turned on'; });  
    } 

    connect(mac){ 

    BluetoothSerial.connect(mac).subscribe((success)=>{ 

     this.status= 'Bluetooth connection is successful with'+ success; 
    }); 
    } 

Write (msg){ 

    BluetoothSerial.write(msg).then(res =>{ 
    this.status = ' This has been written :' + res; 
    }).catch(res=> function(){ 
    this.status = ' This has not been written :' + res; 
    }); 


} 
} 

Проблема: .subscribe не обновляет переменную this.status на виду, если не перейти на другую страницу и вернуться к нему снова.

Запрос: Я хотел бы показать пользователю, что соединение с выбранным устройством было выполнено путем изменения цвета выбранной кнопки. Кроме того, пока он подключается к устройству Bluetooth, я хотел бы показать какое-то уведомление о том, что он подключается к устройству, пожалуйста, подождите? Как я могу это реализовать?

Буду признателен за любую помощь!

Благодаря

Answer 1

Для уведомления ожидания вам нужно реализовать loadingController (помещенных в код в функции подключения()).

Для цвет кнопки,

Мое предложение: Вы должны использовать массив lists для создания другого массива deviceListWithStatus:Array<any> в этом массиве нажмите каждый объект из lists{device:[a device object from the list],status:[the assoc status value]}.

status : any; 
    lists : any ; 
    deviceListWithStatus:Array<any>; 
    Enable(){ 
    deviceListWithStatus = []; 

    BluetoothSerial.isEnabled().then((data)=> { 
     this.status = 'Bluetooth is ON'; 
     BluetoothSerial.list().then((allDevices) => {    
      for(let i in allDevice){ 
     deviceListWithStatus.push({device:allDevice[i],status:'disconnected'}) 
      } 
     }); 
     BluetoothSerial.discoverUnpaired().then((devices)=>{ 
      for(let i in devices){  deviceListWithStatus.push({device:devices[i],status:'disconnected'}) 
      } 
      this.status= 'discovered some devices'; 
     }).catch((err)=> { this.status= 'No devices were found'; }); 
    }).catch((error)=>{ this.status='Bluetooth is not turned on'; });  
    } 

Затем в шаблоне HTML:

<ion-list *ngFor="let dev of deviceListWithStatus"> 
    <button ion-item [ngStyle]="(dev.status=='connected')?{'background-color': 'green'}:{'background-color': 'red'}" (click)="connect(dev)"> 
     <ion-icon name="bluetooth" item-left></ion-icon> 
     {{dev.device.name}} 
    </button> 
    </ion-list> 

Затем измените connect функции, такие как это:

connect(dev){ 
     let loading = this.loadingCtrl.create({ 
     content: 'Please wait...' 
     }); 

     loading.present(); 

    BluetoothSerial.connect(dev.device.address).subscribe((success)=>{ 
     loading.dismiss(); 
     dev.status = 'connected'; 
     this.status= 'Bluetooth connection is successful with'+ success.; 
    }); 
    }