Проблемы с данными Angular/Firebase

Я новичок в Angular и работаю над небольшим проектом для стажировки. Я создал внешний интерфейс и отправил данные в базу данных, но теперь у меня проблемы с получением данных. Я погуглил кое-что и создал асинхронную функцию, которая должна возвращать данные, но когда я делаю это в формате Zone Aware Promise в консоли или когда я использую функцию .then(), я могу только записать в консоль массив данные, но не может вернуть их или передать в глобальную переменную. Вот код компонента:

import {getDatabase, ref} from "firebase/database";
import {get} from "@angular/fire/database";

public async getVehicles() {
    const db = getDatabase();
    const snapshot = await get(ref(db, 'vehicles'));
    return snapshot.val();
  }

и когда я делаю это:

this.getVehicles().then(data => {
  console.info(data);
});

Я получаю массив данных, как я хочу, в консоли. Как я могу получить сами данные внутри внешней переменной, чтобы я мог использовать их и манипулировать ими как обычным массивом? Заранее спасибо.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
29
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

  1. добавьте поле класса под названием list с помощью let list : any
  2. в любое время, когда вы хотите использовать данные:
this.getVehicles().then(data => {
    this.list = data;
});

Или, если вы используете асинхронную функцию, вы можете использовать это:

this.list = await this.getVehicles();

Когда я создаю переменную списка и использую упомянутую вами функцию, я получаю undefined в консоли.

tare22 04.05.2022 19:09

@tare22, можете ли вы поделиться полным кодом, где он регистрирует undefined

Raouf Albeni 05.05.2022 18:25

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

tare22 05.05.2022 20:54
Ответ принят как подходящий

Итак, мне удалось решить эту проблему сегодня с помощью моего друга. Вот код для тех, кто сталкивается с подобной проблемой, надеюсь, это поможет.

public async getVehicles() {
    const db = getDatabase();
    // I made a loading component appear while the data is being fetched.
    this.showLoading = true;
    const snapshot = await get(ref(db, 'vehicles'));
    // placed the promise value into a temporary object, for some reason the data is stored as an object where attributes are the list values I'm trying to get.
    let temp = snapshot.val();
    this.list = Object.keys(temp).map(index => {
      return temp[index];
    });
    // took every element of the returned object and individually placed them into the main list
    this.showLoading= false;
    return snapshot.val();
}

Другие вопросы по теме