Show each item of Array in a ListView

Question

I have a NativeScript app with Angular where I scan some BLE devices.

Although I am able to alert each device that I found in my doStartScanning(), I cannot show them in the ListView(I am new in Angular development).

Can someone tell me what is wrong?

My home-page.component.html file:

<StackLayout>
  <Label text="Bluetooth Connection!!!"></Label>
  <Button text="Scan QR code" (tap)="scanCode()" class="button button-positive"></Button>
  <Button text="Check Bluetooth" (tap)="doIsBluetoothEnabled()" class="button button-positive"></Button>
  <Button text="Enable Bluetooth" (tap)="doEnableBluetooth()" class="button button-positive"></Button>
  <Button text="Scan devices" (tap)="doStartScanning()" class="button button-neutral"></Button>
  <Button text="Stop Scanning" (tap)="doStopScanning()" class="button button-danger"></Button>

  <GridLayout rows="*">
    <ListView [items]="observablePeripheralArray" separatorColor="#90c3d4">
      <ng-template let-peripheral="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout orientation="horizontal" class="padded-label">
          <StackLayout class="padded-label-stack">
            <Label [text]="peripheral.name" class="title-label" textWrap="true"></Label>
            <Label [text]="peripheral.UUID" class="uuid-label" textWrap="true"></Label>
          </StackLayout>
        </StackLayout>
      </ng-template>
    </ListView>
  </GridLayout>

  <GridLayout>
    <ScrollView class="page">
      <StackLayout class="home-panel">
        <GridLayout rows="*">
          <ListView [items]="peripheralsArray">
            <ng-template let-peripheral="item" let-i="index" let-odd="odd" let-even="even">
              <StackLayout orientation="horizontal" class="list-group-item">
                <Label [text]="peripheral.name"></Label>
                <Label [text]="peripheral.UUID"></Label>
              </StackLayout>
            </ng-template>
          </ListView>
        </GridLayout>
      </StackLayout>
    </ScrollView>
  </GridLayout>
</StackLayout>

My home-page.component.ts file:

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")
  .ObservableArray;

var observablePeripheralArray = new observableArray.ObservableArray();
var peripherals = observablePeripheralArray;

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

class Peripheral {
  constructor(name, UUID) {
    this.name = name;
    this.UUID = UUID;
  }
  name: string;
  UUID: string;
}

@Component({
  selector: "ns-home-page",
  templateUrl: "./home-page.component.html",
  styleUrls: ["./home-page.component.css"],
  moduleId: module.id
})
export class HomePageComponent implements OnInit {
  public peripheralsArray = new ObservableArray();

  constructor() {
    this.peripheralsArray.push(fromObject(new Peripheral("Device1", "34242")));
    this.peripheralsArray.push(fromObject(new Peripheral("Device2", "41244")));
    this.peripheralsArray.push(fromObject(new Peripheral("Device3", "24124")));
    this.peripheralsArray.push(fromObject(new Peripheral("Device4", "214124")));
    this.peripheralsArray.push(fromObject(new Peripheral("Device5", "214214")));
  }

  ngOnInit(): void {}

  doIsBluetoothEnabled() {
    bluetooth.isBluetoothEnabled().then(function(enabled) {
      dialogs.alert({
        title: "Bluetooth Enabled: ",
        message: enabled ? "Yes" : "No",
        okButtonText: "OK"
      });
    });
  }

  doEnableBluetooth() {
    bluetooth.enable().then(function(enabled) {
      setTimeout(function() {
        dialogs.alert({
          title: "Enable Bluetooth",
          message: enabled ? "Yes" : "No",
          okButtonText: "OK"
        });
      }, 500);
    });
  }

  // this one uses automatic permission handling
  doStartScanning() {
    // reset the array
    observablePeripheralArray.splice(0, observablePeripheralArray.length);
    bluetooth
      .startScanning({
        serviceUUIDs: [], // pass an empty array to scan for all services
        seconds: 6, // passing in seconds makes the plugin stop scanning after <seconds> seconds
        onDiscovered: function(peripheral) {
          observablePeripheralArray.push(observable.fromObject(peripheral));
          console.log(observablePeripheralArray);
          dialogs.alert({
            title: "Results",
            message: "Scanning is complete " + peripheral.UUID,
            okButtonText: "OK"
          });
        }
      })
      .then(
        function() {
          dialogs.alert({
            title: "Scanning is complete",
            message: "Scanning is complete",
            okButtonText: "OK"
          });
        },
        function(err) {
          dialogs.alert({
            title: "Error occured!",
            message: err,
            okButtonText: "OK"
          });
        }
      );
  }

  doStopScanning() {
    bluetooth.stopScanning().then(
      function() {
        dialogs.alert({
          title: "Stop Scanning",
          message: "Scanning is stopped",
          okButtonText: "OK"
        });
      },
      function(err) {
        dialogs.alert({
          title: "Error occured!",
          message: err,
          okButtonText: "OK"
        });
      }
    );
  }
}

Answer 1

Your observablePeripheralArray is defined outside of the class, it should be defined as a class field. The following is an example of how you should structure your component instead:

import { Component, OnInit } from "@angular/core";
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").ObservableArray;

class Peripheral {
    constructor(name, UUID) {
        this.name = name;
        this.UUID = UUID;
    }
    name: string;
    UUID: string;
}

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {
    public peripherals = new ObservableArray();
    constructor() {
        this.peripherals.push(fromObject(new Peripheral("Device1", "34242")));
        this.peripherals.push(fromObject(new Peripheral("Device2", "41244")));
        this.peripherals.push(fromObject(new Peripheral("Device3", "24124")))
        this.peripherals.push(fromObject(new Peripheral("Device4", "214124")))
        this.peripherals.push(fromObject(new Peripheral("Device5", "214214")))
    }

    ngOnInit(): void {
    }
}

Markup:

<GridLayout>
    <ScrollView class="page">
        <StackLayout class="home-panel">
            <GridLayout rows="*">
                <ListView [items]="peripherals">
                    <ng-template let-peripheral="item" let-i="index" let-odd="odd"
                        let-even="even">
                        <StackLayout orientation="horizontal" class="list-group-item">
                            <Label [text]="peripheral.name"></Label>
                            <Label [text]="peripheral.UUID"></Label>
                        </StackLayout>
                    </ng-template>
                </ListView>
            </GridLayout>
        </StackLayout>
    </ScrollView>
</GridLayout>

See working example here: https://play.nativescript.org/?template=play-ng&id=HYb8Ik