Блог

Главная - Вопросы по программированию - Не удается запросить пользовательские данные из базы данных firestore в angular

Не удается запросить пользовательские данные из базы данных firestore в angular

# #angular #typescript #firebase #google-cloud-firestore

Вопрос:

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

Моя проблема в том, что я не могу извлечь данные из firestore и сохранить их локально.

файл appuser.ts

     export interface User {
    uid: string;
    email?: string;
    photoURL?: string;
    displayName?: string;
    drawings?: [{
        id?: string;
        canvasfile?: string;
        shared?: boolean | false;
    }];

файл component.ts

 import { Component, OnInit, OnChanges, Input, SimpleChanges } from "@angular/core";
import { AuthService } from "../../services/auth.service";
import { User } from "../../models/appuser";
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { map, catchError } from 'rxjs/operators';

@Component({
  selector: "app-drawspace",
  templateUrl: "./drawspace.component.html",
  styleUrls: ["./drawspace.component.css"]
})
export class DrawspaceComponent implements OnInit {

  constructor(private auth: AuthService, private afs:AngularFirestore) {}
  public availableUsers: any;
  users: any;
  ngOnInit() {
    this.fetchAvailableUsers()
  }

  fetchAvailableUsers() {
    this.availableUsers = this.afs
      .collection<User>('users')
      .snapshotChanges()
      .pipe(
        map(docArray => {
          return docArray.map(doc => {
            let userss: User = {
              uid: doc.payload.doc.id,
              displayName: doc.payload.doc.data().displayName,
              email: doc.payload.doc.data().email,
              photoURL: doc.payload.doc.data().photoURL
            };
            return userss;
          });
        })
      );
      console.log("here see == ", this.availableUsers); // I get observable
      console.log("here see == ", this.availableUsers); // I get object

  }

}

когда я запускаю это,
Я получаю наблюдаемый тип, когда я пытаюсь console.log, он выдает мне [объект OBJECT], и я даже не могу использовать для него *ngFor.

Я новичок в angular и firebase firestore, пожалуйста, помогите мне получить пользовательские данные, которые я успешно сохранил.

Спасибо.

Комментарии:

1. Попробуйте войти в журнал консоли this.availableUsers.length , чтобы проверить, является ли то, что у вас есть, массивом или нет. И если вы хотите отобразить содержимое объекта в консоли, то регистрируйте только этот объект, не создавайте интерполяции, потому что в вашем случае log метод вызывает .toString() this.availableUsers , поэтому вы получаете [объект Object]. Попробуйте console.log(this.availableUsers) и вернитесь с тем, что у вас есть 😉

2. Я попробовал console.log(this.availableUsers.length) и получил undefined .

Ответ №1:

JavaScript [объект Object] — это строковое представление объекта. Если вы хотите просмотреть содержимое, попробуйте console.log(JSON.stringify(thatObj)) 

  fetchAvailableUsers() {
    this.availableUsers = this.afs
      .collection<User>('users')
      .snapshotChanges()
      .pipe(
        map(docArray => {
          const data = []
          docArray.forEach(doc => {
            let userss: User = {
              uid: doc.payload.doc.id,
              displayName: doc.payload.doc.data().displayName,
              email: doc.payload.doc.data().email,
              photoURL: doc.payload.doc.data().photoURL
            };
            data.push(userss)
          });
          console.log(data)  //console.log(JSON.stringify(data))
                      ^^^^
          return data
        })
      );

Комментарии:

1. @Dharmaraj Спасибо за ваш ответ, но он выдает мне ошибку компиляции error TS7034: Variable 'data' implicitly has type 'any[]' in some locations where its type cannot be determined. в const data = [] строке.

2. @Аватар, пожалуйста, попробуйте const data: any[] = []

3. @Dharmaraj Да, это решило ошибку компиляции, но консоль ничего не дает. Я думаю, что он не проходит через этот цикл, потому что я проверил его, сохранив общий журнал console.log, он ничего мне не показал.

4. @Avatar вы можете console.log(docArray) сделать это перед циклом for? Также попробуйте docArray.docs.forEach(..) , например, цикл на .docs свойстве.

5. @Дхармарадж, который выдал ошибку error TS2339: Property 'docs' does not exist on type 'DocumentChangeAction<User>[]'.

Ответ №2:

Я думаю, что проблема может заключаться в том, что JavaScript выполняет ваши инструкции синхронно, что означает, что он отправляет запрос в firebase и переходит к отображению списка пользователей, не дожидаясь получения результата запроса

Попробуйте отобразить список пользователей с помощью крана и дайте мне знать, если у вас что-то есть.

 fetchAvailableUsers() {
  this.availableUsers = this.afs
    .collection<User>('users')
    .snapshotChanges()
    .pipe(
      map(
        // your mapping goes here...
      ),
      tap(users => console.log(users))
    );
}

Комментарии:

1. Эй, спасибо, но это ничего не выдает.

2. Давайте сделаем это шаг за шагом. Давайте убедимся, что некоторые данные действительно извлекаются из firebase. Возьмите весь код fetchAvailableUsers() и напишите внутри следующий фрагмент: this.afs.collection('users').snapshotChanges().subscribe(result => console.log(result)); Если что-то отображается, это означает, что мы можем перейти к части отображения 🙂

3. Эй, у меня кое-что есть.. {…}] 0: {type: "added", payload: t} length: 1 [[Prototype]]: Array(0) [{…}] 0: {type: "modified", payload: {…}} length: 1 [[Prototype]]: Array(0) [{…}] 0: {type: "modified", payload: {…}} length: 1 [[Prototype]]: Array(0)

Метки: