在Ionic / Angular 2中执行成功回调函数后更改按钮颜色

debugcn 发表于 Dev

阿姆利特·索哈尔（Amrit Sohal）

首先，我是一个编程新手，我试图构建一个离子应用程序，用于通过蓝牙将命令发送到arduino。

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

此函数遍历已配对的设备，并且每当我单击特定的按钮/设备时，都会触发connect（）函数，并且在连接成功时会调用成功的回调函数。

    @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变量，除非我切换到其他页面并再次返回到它。

要求：我想通过更改所选按钮的颜色向用户显示已连接到所选设备。另外，当它正在连接到蓝牙设备时，我想显示某种通知它正在连接到蓝牙设备，请稍候？我该如何实施？

我将不胜感激任何帮助！

谢谢

nylates

对于等待通知，您需要实现loadingController（放置在connect（）函数中的代码中）。

对于按钮颜色，

我的建议：您应该使用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.;
    });
  }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。