Page not refresh when update variable (Ionic 2)

Question

I have one issue in my app.

I have a var array in ts, and in html I have list with one for and paint this array.

When I add text automatly the html refresh and paint one line more, the problem is when I use getPicture ( camara plugin ) to get image of gallery and add this to array, everything works correctly, but the html not refresh, when I click in another section automatly refresh the html.

If I only add text when I pick image the same thing happen, I think getpicture “blocks” the refresh of app.

Anyone know the way to force “refresh” of page, or any solution to this issue?

Thx

import { IonicPage, NavController, NavParams, AlertController, ModalController } from 'ionic-angular';
import { Component } from '@angular/core';

@IonicPage()
@Component({
    selector: 'page-chat-chat',
    templateUrl: 'chat.html',
})
export class ChatPage {

hilos: any;

constructor(public navCtrl: NavController, public alertCtrl: AlertController, public navParams: NavParams, public http: HttpProvider, public global: GlobalProvider, public modalCtrl: ModalController) {

}

addFile(file) {

    navigator["camera"].getPicture(

        function(uri){

            this.hilos.unshift({"ID":new Date().getTime(),"TYPE":"FILE","TEXT":uri,"SIZE":""});
        },
        function(message){

            //alert("alert",'Failed because: ' + message);
        },
        {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA, //Camera.PictureSourceType.SAVEDPHOTOALBUM
            correctOrientation: true,
            saveToPhotoAlbum: true,
            targetWidth: 800,
            targetHeight: 800
        }
    );

}

<ion-list>
    <ion-card *ngFor="let h of hilos">

        <ion-card-content>

            <ion-list>

                <ion-item class="body">
                    <span *ngIf="h.TYPE == 'TEXT'" class="text">{{h.TEXT}}</span>
                    <span *ngIf="h.TYPE == 'IMAGE' && h.IMAGE == undefined" class="text"><img src='{{h.TEXT}}'></span>
                    <span *ngIf="h.TYPE == 'IMAGE' && h.IMAGE != undefined" class="text"><img src='{{h.IMAGE}}'></span>

                    <div class="file" *ngIf="h.TYPE == 'FILE'">
                        <img src='../../assets/images/adjuntos/{{h.TEXT.split(".").pop()}}.png'>
                        <span class="texto">{{h.TEXTO.split("/").pop()}}</span>
                    </div>
                </ion-item>

            </ion-list>

        </ion-card-content>

    </ion-card>
</ion-list>

Possible duplicate of [Angular 2 Change Detection and Zone are Different in Cordova App](https://stackoverflow.com/questions/41903594/angular-2-change-detection-and-zone-are-different-in-cordova-app) — LuckyStarr, Oct 13 '17 at 16:34
I'm pretty sure I can help you with this but I need to see what you've done thus far so that I can help fill in the gaps. — Anjil Dhamala, Oct 13 '17 at 19:27
@AnjilDhamala I edit my question, and write code, the problem is when use getPicture(), if I remove this part it works perfectly. — Chaeos, Oct 16 '17 at 07:18

score 0 · Answer 1 · answered Oct 16 '17 at 15:14

Please refer to ionic-native/camera to see how to use the plugin. I'd suggest, inject the plugin in the constructor and use is as:

this.cameraPlugin.getPicture()

the getPicture() function takes an object as parameter. Hence you'd be doing,

let cameraOptions = {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.CAMERA, //Camera.PictureSourceType.SAVEDPHOTOALBUM
            correctOrientation: true,
            saveToPhotoAlbum: true,
            targetWidth: 800,
            targetHeight: 800
        }

and then

    this.cameraPlugin.getPicture(cameraOptions)
        .then((uri) => {
             this.hilos.unshift({"ID":new Date().getTime(),"TYPE":"FILE","TEXT":uri,"SIZE":""});
        }, (message)=>{
          //alert("alert",'Failed because: ' + message);
    });

Page not refresh when update variable (Ionic 2)

1 Answers1