last day (15 days later) » 

10:03 AM
0
A: Show each item of Array in a ListView

etarhanI think you are trying to loop through a observable, it should be resolved first. You could use AsyncPipe in your ngFor: *ngFor="let peripheral of observablePeripheralArray | async" This will allow you to render the peripherals the moment they are resolved However, it seems like your ListView...

 
Hi! First of all, thank you for your reply. Unfortunately, items are not shown and listed in the ListView.
 
can you change the [items]="observablePeripheralArray" to [items]="observablePeripheralArray | async"?
 
I changed it and it does not work.
 
please check my updated answer @KathrineHanson
 
Hi. Thank you again. I also checked this post before. I tried your code but unfortunately again it does not work. :-(
 
10:03 AM
@KathrineHanson Does it throw an error, what do you see exactly?
 
No. It just does not show each peripheral. The alert message: "Scanning is complete " + peripheral.UUID works perfectly and shows me each peripheral device.
Hi
 
hi
 
I tried ur code but it does not work. I do not know why it does not show the list of the peripherals.
 
i see that you are wrapping every peripheral in a observable before pushing into the ObservableArray
why is that?
 
I also added a console.log of the observablePeripheralArray and it shows all devices
I took the code for doStartScanning() from the team that implemented the plugin for bluetooth connection in nativescript
They had a different way of implementation which also does not work
You can see here:
 
10:10 AM
alright I'll have a look
So you probably were looking at this page right? github.com/EddyVerbruggen/nativescript-bluetooth-demo/blob/…
 
Yes
But I am using js instead of typescript
 
Alright, I'm assuming that just interpolating like this also didnt work for you? items="{{ peripherals }}"
because that seems like how the demo is making it work
So this doesn't work?
<ListView items="{{ peripherals }}" itemTap="onPeripheralTap" separatorColor="#90c3d4">
<ListView.itemTemplate>
<StackLayout orientation="horizontal" class="padded-label">
<StackLayout class="padded-label-stack">
<Image horizontalAlignment="right" width="30" src="~/res/signal-strength.png" />
<Label horizontalAlignment="right" width="30" text="{{ RSSI }}" class="rssi-label" />
</StackLayout>
<StackLayout class="padded-label-stack">
<Label text="{{ name }}" class="title-label" textWrap="true" />
 
10:26 AM
Υes
It does not work
 
alright, can you remove the fromObject wrapper please from the peripherals that are being added
if that works we can go ahead and try to implement the full solution
we should be able to in the very least make something render in the template
 
I removed it and left it like this: observablePeripheralArray.push(peripheral)
But nothing
 
ok, lets forget about the ListView for a moment, can you just interpolate the variable somewhere on the page
{{ observablePeripheralArray }}
also you mention that you removed fromObject
what does the console.log like when you do that
ok I see what the problem is
var observablePeripheralArray = new observableArray.ObservableArray();
var peripherals = observablePeripheralArray;
these should be inside of your class
I'm sorry it took so long for me to see
 
11:42 AM
That does now work also
Sorry for my late response
 
 
1 hour later…
12:54 PM
hello
are you there
could you update your question with your current code? I have tested the nativescript play on my device and it seems to work fine
 
1:23 PM
Ηι
Hi
May I miss a plugin?
 
hello
 
I dont know
 
dont think you do
could you post your ts file here
just copy paste
 
Yes
import { Component, OnInit } from "@angular/core";



var dialogs = require("tns-core-modules/ui/dialogs");

var bluetooth = require("nativescript-bluetooth");

var observable = require("tns-core-modules/data/observable");

var observableArray = require("tns-core-modules/data/observable-array");



const Observable = require("tns-core-modules/data/observable").Observable;

const fromObject = require("tns-core-modules/data/observable").fromObject;

const ObservableArray = require("tns-core-modules/data/observable-array")
 
import { Component, OnInit } from "@angular/core";



var dialogs = require("tns-core-modules/ui/dialogs");
var bluetooth = require("nativescript-bluetooth");

const fromObject = require("tns-core-modules/data/observable").fromObject;
const ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;

var BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;
var barcodescanner = new BarcodeScanner();

class Peripheral {
  constructor(name, UUID) {
    this.name = name;
class fields are initialized without var, const or let
and need to be referenced using this
 
1:37 PM
An uncaught Exception occurred on "main" thread.
com.tns.NativeScriptException:
Calling js method onScanResult failed

TypeError: Cannot read property 'observablePeripheralArray' of undefined
File: "file:///data/data/org.nativescript.myangularapp/files/app/app/bluetooth/home-page.component.js, line: 59, column: 21

StackTrace:
Frame: function:'onDiscovered', file:'file:///data/data/org.nativescript.myangularapp/files/app/app/bluetooth/home-page.component.js', line: 59, column: 22
Frame: function:'onScanResult', file:'file:///data/data/org.nativescript.myangularapp/files/app/tns_modules/nati
I get this error
 
onDiscovered: (peripheral) => {
          this.observablePeripheralArray.push(fromObject(peripheral));
          console.log(this.observablePeripheralArray);
          dialogs.alert({
            title: "Results",
            message: "Scanning is complete " + peripheral.UUID,
            okButtonText: "OK"
          });
        }
dont use function here, it highjacks the this keyword
use an arrow function instead
if you change the onDiscovered to the above the error should go away
new error?
 
Yes! Now it works
Thank you so much
 
Does all of it work?
also the initial problem is solved?
 
Yes. The initial problen is solved
Is it easy to explain me again why it did not work?
 
yess
I'm glad
well happy coding to you, see ya around :)
 
1:47 PM
🙏
 

last day (15 days later) »