Как я могу поместить sh URL-адресов возвращенных элементов из облачного хранилища Firebase в массив в Angular?

Question

Цель:
Цель состоит в том, чтобы вернуть изображения, хранящиеся в сегменте хранилища Firebase, используя listAll(), а затем получить их URL-адреса, используя getDownloadURL() и pu sh каждый URL-адрес в массив, который использоваться для отображения изображений в галерее.

Проблема:
Мне удалось вернуть URL-адреса, но я получаю эту ошибку: TypeError: "_this is undefined" при попытке pu sh их в пустой массив.

Что я сделал:
Я пробовал несколько подходов за последние 3 дня, и это было лучшее, что я мог придумать:

Объявление пустого массива:
export class imgService {
public images = []

Метод:

//creating a reference
var itemsRef = firebase.storage().ref().child('images/');
// listing the images
itemsRef.listAll().then(function (result) {
    result.items.forEach(function (itemRef) {
        // getting the URLs of the images
        itemRef.getDownloadURL().then(downloadURL => {
            console.log('URL:' + downloadURL);
            // pushing URLs to the empty images array
            this.images.push(downloadURL); //PROBLEM OCCURS HERE
        }).catch(function (error) {
            //Handling error here
        });
    });
}).catch(function (error) {
    //Handling error here
});

Я новичок во всем этом, просто пытаюсь изучить веб-технологии, поэтому, пожалуйста, go полегче со мной. Спасибо

Answer 1

Похоже, проблема заключается в понимании того, как 'this' работает в js. Как указано на веб-сайте mozilla , есть два способа решения проблемы, с которой вы столкнулись.

Первым, кто идентифицирует проблему:

В большинстве случаев значение этого параметра определяется способом вызова функции (привязка времени выполнения). Его нельзя установить путем присвоения во время выполнения, и он может отличаться каждый раз при вызове функции.

В текущем контексте вы теряете ссылку на «this», которое хотите, определяя обычная функция для обработки listAll().then и result.items.forEach.

Затем посмотрите на возможные решения:

ES5 представил метод bind () для установки значения функции this независимо от о том, как он вызывается, а ES2015 представил стрелочные функции, которые не обеспечивают собственной привязки this (он сохраняет значение this из включающего лексического контекста). 1022 * на 'this', которое вы имеете в виду, или просто передайте все вниз, используя стрелочные функции . В этом случае я предпочитаю использовать стрелку, поэтому следующий код должен работать.

Надеюсь, это решит вашу проблему и поможет вам понять, в чем заключается основная проблема.

//creating a reference
var itemsRef = firebase.storage().ref().child('images/');
// listing the images
itemsRef.listAll().then((result) => {
    result.items.forEach((itemRef) => {
        // getting the URLs of the images
        itemRef.getDownloadURL().then(downloadURL => {
            console.log('URL:' + downloadURL);
            // pushing URLs to the empty images array
            this.images.push(downloadURL); //PROBLEM OCCURS HERE
        }).catch(function (error) {
            //Handling error here
        });
    });
}).catch(function (error) {
    //Handling error here
});