更新变量时页面不刷新(Ionic 2)

时间:2017-10-13 15:01:09

标签: ionic-framework

我的应用中有一个问题。

我在ts中有一个var数组,在html中我有一个for的列表并绘制这个数组。

当我自动添加文本html刷新并多刷一行时,问题是当我使用getPicture(camara插件)获取gallery的图像并将其添加到数组时,一切正常,但html不刷新,我点击另一个部分自动刷新html。

如果我在选择图片时只添加文字同样的事情发生,我认为getpicture“阻止”应用程序的刷新。

任何人都知道强制“刷新”页面的方法,或者解决此问题的方法吗?

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>

1 个答案:

答案 0 :(得分:0)

请参阅ionic-native/camera以了解如何使用该插件。我建议,在构造函数中插入插件并使用如下:

this.cameraPlugin.getPicture()

getPicture()函数将对象作为参数。因此,你一直在做,

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

然后

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