无法将图像显示为由 cordovaplugin 捕获的图像答案

【问题标题】：could not bring image to view were image captured by cordovaplugin无法将图像显示为由 cordovaplugin 捕获的图像
【发布时间】：2017-06-22 22:32:04
【问题描述】：

我点击此链接Ionic 2 File Plugin usage examples 拍照并将其存储到我内部存储器中的目标文件夹中，我对其进行了测试，效果很好，接下来我尝试列出该文件夹中的所有文件，但我可以不显示，

<ion-list>
    <ion-item><img  [src]="file"  *ngFor="let file in myFiles"></ion-item>
  </ion-list>


import { Component } from '@angular/core';

    import { NavController, AlertController, ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
    import { Camera } from 'ionic-native';
    import { File } from 'ionic-native';
    import { FilePath } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    file;
    public base64Image: string;
    myFiles: string[];

 constructor(public navCtrl: NavController,
              public alertCtrl: AlertController){}
    listImage(){
            console.log("list image files");
            var fileSystem = cordova.file.externalRootDirectory;
            var folderpath = fileSystem + "Vanan Audio/";
            console.log("img",folderpath);
            File.listDir(cordova.file.externalRootDirectory, 'vanan Audio').then(
              (allFiles) => {
                // do something
                console.log(allFiles);
                var i =0
                console.log(allFiles[i+1].name);
                for (i = 0; i < allFiles.length; i++) { 
                    console.log(allFiles[i].name);
                    console.log(allFiles[i].nativeURL);

                }
                  this.myFiles = allFiles;
                return allFiles
              }
            ).catch(
              (err) => {
                // do something
              }
            );
        }
  }

现在我可以使用外部根目录拍照并将其存储到文件夹中，我可以使用循环列出文件名，我需要将该文件夹中的所有图像显示到我的 ionic 视图中

当我在我的设备上运行它时出现错误声明

deviceready has not fired after 5 seconds. cordova.js:1223
Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known property of 'div'. ("


    <div [ERROR ->]*ngFor="let file in myFiles">

        <img [src]="file.nativeURL"/>
"): HomePage@28:9.............................

【问题讨论】：

你不能只设置一个组件变量并在 html 中使用它吗？
你能告诉我怎么做吗？
是提供者还是组件中的函数？否则你将不得不链接承诺
检查我更新的问题@suraj。我没有添加任何提供程序或服务，只是添加了插件并使用我的 .ts 文件，我认为我没有正确完成它当我的设备加载时我得到错误我使用检查元素进行检查，而在我的手机中我只得到一个白色屏幕
解决了吗？如果是这样，最好关闭问题并标记它..

标签： ionic2 cordova-plugins

【解决方案1】：

在组件中有一个文件路径数组：

myFiles:any[];//assign empty array in constructor

在File.listDir then 中（假设listImage() 在组件中）：

this.myFiles = allFiles;

在html中，

<div *ngFor="let file of myFiles">
 <img [src]="file.nativeURL"/>
</div>

【讨论】：