Nativescript-camera angular Image not updating on the view


#1

Hello, I’m trying to take a picture with the camera or select one from the gallery, then display it on my view(As simple as that:)).
But the avatar is not updating after I set the new value in the camera.takePicture callback, as shown bellow.

Angular seems not to be detecting the changes.The same Image i’m strying to show on my view, Is being successfully uploaded to my server using nativescript-background-http.

Here is my environment:

“tns-ios”: “version”: “3.0.0"
“tns-android”: “version”: “3.0.0"
@angular/core”: “4.0.0”,
“tns-core-modules”: “~3.0.0”

Issue happening on both IOS and Android

Thanks


// template
<Image col="0" [src]="avatar ? avatar : 'http://az616578.vo.msecnd.net/files/2016/02/26/6359205735078996801943823024_vibe-kevin-hart.jpg'" class="thumb img-rounded" width="45" height="45" verticalAlignment="middle"></Image>

// component 

   camera.requestPermissions();
   let options = {
       width: this.width,
       height: this.height,
       keepAspectRatio: this.keepAspectRatio,
       saveToGallery: this.saveToGallery,
       format: 'png'
    };

    camera.takePicture(options)
      .then(imageAsset => {
          this.avatar =imageAsset // update view with new image
          this.uploadImage()  // upload on the server
        }).catch(err => {
            console.log('error!!!!!----',err.message);
        });

#2

Can you try adding it to the Angular zone?

zone.run(() => {
    // Update view bound variable here
});

Sometimes when things operate via different threads or listeners, they need to be added to the correct zone when it comes to updating them on the screen.

Best,


#3

Thanks for the suggestion.

I tried Angular’s NgZone as shown bellow, be still having the same issue

  camera.takePicture(options)
      .then(imageAsset => {
          this.zone.run(() => {
            this.imageTaken = imageAsset;
          });

          this.uploadImage()
        }).catch(err => {
            console.log('error!!!!!----',err.message);
        });

#4

Which camera library are you using? You might need to convert imageAsset into an ImageSource first.


#5

converting to ImageSource doesn’t help.

            this.imageTaken = imageAsset;
            let tmp = new ImageSource();
            let image: ImageSource;
            tmp.fromAsset(this.imageTaken)
              .then((img) => {
                this.avatar = img;
              })

I’m using nativescript-camera version 3.0.0

Other dependencies are as follows:
“tns-ios”: “version”: “3.0.0"
“tns-android”: “version”: “3.0.0"
@angular/core”: “4.0.0”,
“tns-core-modules”: “~3.0.0”

Is there any other camera module that I can use to take pictures and upload images from Album?

Do you have a working example of how to use the camera module and bind Image to the view?

even the nativescript-sdk-examples-ng examples is not working!


#6

I finally had it working! Actually I was making a mistake, by passing a static array to The listview. So angular seems to be updating the template only if the array passed to listview as “items” has changed. ngZone.run was also needed to make it work.

    <ListView   class="list-group"   [items]="[1, 2]">
      <template> 
       // Image code
      </template>
   </ListView>

Thanks for your help @nraboy


#7

Awesome! Glad you got it working :slight_smile: