Ошибка при отображении изображений, загруженных из хранилища устройства

Question

Некоторое время назад я написал функцию, которая делала снимок с камеры телефона, сохраняла его в памяти устройства и показывала фотографии, которые уже были сделаны на странице.Функция была почти полностью основана на этом великолепном примере и работала отлично.

Для отображения изображений на странице я использую эту функцию внутри контейнера ng: <ng-container *ngFor = "let img of images; index as pos" text-wrap>

Сейчас я пишу новую версию приложения с некоторыми функциями, идентичными старой, включая ту, о которой я упоминал.Но теперь, когда эта функция отображения изображений на странице срабатывает, я получаю следующую ошибку:

TypeError: Невозможно преобразовать неопределенное или нулевое в объект

сводящая с ума частьчто код, включающий эту функцию, на 100% такой же, как предыдущий, который работает отлично.Другое дело, что в консоли я вижу, что изображения уже были загружены до того, как ошибка была запущена, что делает ошибку еще более странной, поскольку массив images не является ни неопределенным, ни нулевым в момент создания ошибки.

Мой код:

const STORAGE_KEY = 'my_images';

export class MyPage implements OnInit {
    images = [];

    constructor(
        private file: File,
        private storage: Storage,
        private platform: Platform,
    )

    ngOnInit() {
        // When platform is ready, load stored images
        this.platform.ready().then(() => {
            this.loadStoredImages();
        });
    }

    loadStoredImages() {
        this.storage.get(STORAGE_KEY).then(images => {
            if (images) {
                let arr = JSON.parse(images);
                this.images = [];
                console.log(arr);

                // Populate local 'images' array with stored data
                for (let img of arr) {
                    let filePath = this.file.dataDirectory + img.name;
                    this.images.push({ name: img.name, filePath: filePath});
                }
                console.log(this.images);
            }
        });
    }
}

Answer 1

Проблема в этом случае заключается в атрибуте text-wrap в элементе <ng-container>.Как @rapropos упоминается в этом посте:

ng-container на самом деле не превращается в элемент DOM, поэтому к нему могут применяться только структурные директивы.Присутствие text-wrap вытягивает директиву CssUtilsDeprecations, которая не является структурной и поэтому предполагает, что она находится над элементом DOM.Это не так, черт возьми.

Answer 2

при получении изображения в then () вы можете добавить что-то вроде:

this.imagePicker.getPictures(options).then((results) => {

  for(let i = 0; i < results.length; i++){

    let filename = results[i].substring(results[i].lastIndexOf('/') + 1);
    let path = results[i].substring(0, results[i].lastIndexOf('/') + 1);
    this.file.readAsDataURL(path, filename).then((base64string)=>{

      this.image_data[i] = base64string;

    });

  }

});

Я не знаю, получаете ли вы изображения с галереей, но это сработало для меня, когда япытался заставить это работать без использования resolLocalFileSystemUrl и, кажется, не работает filepath устройства ...