Observable events in combination with Bluetooth require ApplicationRef.tick()

@biller_anton wrote:

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();
		});
	}
}

Posts: 1

Participants: 1

Read full topic