Hi,
I have a working example where bluetooth devices are discovered and then data is sent and received.
Can someone explain why in the following part the first devices
array is getting a visual update and the other raw
data array not?
The second update where data is received requires ApplicationRef.tick()
in order to get updated correctly.
View:
<ion-content padding>
<ion-list>
<ion-list-header>
Bluetooth devices
</ion-list-header>
<ion-item *ngIf="!devices">
<ion-spinner></ion-spinner>
</ion-item>
<button ion-item *ngFor="let device of devices"
(click)="deviceSelected(device)">
{{device.name}}
</button>
<ion-item *ngFor="let r of raw">
<ion-label>Raw</ion-label>
<ion-label>{{r}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
Controller:
export class BtExplorerPage implements OnInit {
public devices: Array<{name: string, address: string}>;
public raw: Array<string> = [];
constructor(
private bluetoothSerial: BluetoothSerial,
private applicationRef: ApplicationRef) { }
public ngOnInit() {
Observable.fromPromise(this.bluetoothSerial.discoverUnpaired())
.subscribe((list: any) => {
this.devices = list;
});
}
public deviceSelected(device: {name: string, address: string}) {
Observable.fromPromise(this.bluetoothSerial.enable()).flatMap(() => {
return this.bluetoothSerial.connect(device.address);
}).subscribe(() => {
// wait for data line from server
this.bluetoothSerial.subscribe("\n").subscribe((data) => {
this.raw.push(data); /***this.applicationRef.tick();***/
});
// send command to server, server responds with data line
Observable.fromPromise(this.bluetoothSerial.write("COMMAND\n"))
.subscribe();
});
}
}