CODEWITHSUNDEEP
angularionic-framework
sikaili99
sikaili99

Reputation: 582

How can I solve this ngFor in my code for ionic 3

I have a cordova bluetooth plugin that is working OK but when I try to show the list of paired devices I am unable to show them on the html page but just on alert. I have tried all I can but I am failing to show data on the html page of the app. I cant really get the error via console as I am running the app on the real device. I am new to ionic and angular, any help I will really appreciate very much. Thank you

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      BlueTooth Printer
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
 
  <ion-list>
      <ion-item *ngFor=" let device of devicelists">
        {{device?.address}}
      </ion-item>
  </ion-list>

</ion-content>

And here is my home.ts code for

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

 declare var bluetoothSerial: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  devicelists: any;

  constructor(public navCtrl: NavController) {
   
  }

  ionViewDidLoad(){
   this.isEnabled();
   this.listDevices();
  }

  listDevices(){
    bluetoothSerial.list(
      function(devices) {
      devices.forEach(function(device) {
        alert(device.address); // This is working just fine
        this.devicelists = device; // But this is what is not working
      })
  }, 
  function(failure){
    alert(failure);
  });
  }
  isEnabled(){
    bluetoothSerial.enable(
      function() {
          alert("Bluetooth is enabled");
      },
      function() {
          alert("The user did *not* enable Bluetooth");
      }
  );
  }

  connect(){
    bluetoothSerial.connect(
     function(data){
      console.log("Success");
      alert(data)
    });
  }
  desconnect(){
    bluetoothSerial.disconnect(function(data){
      console.log("Success");
      alert(data)
    },function(err){
      console.log("Error");
      alert(err)
    })
  }
  printText(){
    bluetoothSerial.write(function(data){
      console.log("Success");
      alert(data)
  },function(err){
      console.log("Error");
      alert(err)
  }, "String to Print")
  }

}

Upvotes: 0

Views: 75

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39432

Change your implementation of listDevices() method by using an array function syntax instead of a normal function syntax

listDevices() {
  bluetoothSerial.list(devices => this.devicelists = devices)
}

This way you'll be able to bind to the correct this

Upvotes: 1

Suryan
Suryan

Reputation: 659

Try changing callbacks to arrow functions like from this

listDevices(){
bluetoothSerial.list(
  function(devices) {
  devices.forEach(function(device) {
    alert(device.address); // This is working just fine
    this.devicelists = device; // But this is what is not working
  })
}

to

  listDevices(){
    bluetoothSerial.list(
      (devices) => {
      devices.forEach((device) => {
        alert(device.address); // This is working just fine
        this.devicelists = device;
      })
  })
}

Upvotes: 0

Related Questions