Невозможно получить данные из Firestore

Question

У меня проблема с извлечением отображаемых данных из firestore в моем приложении.

При запуске приложения выдается ошибка:

Не удается найти другой вспомогательный объект ' [object Object] 'типа' object '.

Это post.component. html <div *ngFor= "let p of posts$"| async>

post.component.ts

export class PostsComponent {
    posts$;
    constructor(private createPostService: CreatePostService) {
        this.posts$ = this.createPostService.get();
    }
}

это почта

get() {
    return this.db.collection('posts');
}

Answer 1

Я бы go с другим подходом при сохранении и загрузке данных в и из Firestore. Я работаю над разработкой Ioni c 4 в Angular, и структура приложения похожа на вашу.

Мой подход к сохранению данных и загрузке данных из базы данных Firestore:

In: post.component.ts

1. Объявление типа интерфейса что я хочу хранить данные как. Это объявлено справа ниже методов импорта в начале файла:

export interface Post {
  pid:string, //This is the post's ID
  uid:string, //User's ID that has posted the post 
  message:string, // This is the post's content
  timestamp:number, // This is the post's date and time
} // This is just brief data for the example

Затем вы должны объявить переменную publi c в виде массива типа Post, чтобы вы загружали туда все записи перед предварительным просмотром. Затем в конструкторе загрузите данные и сохраните их в массив:

    posts:Post[] = [];
    constructor([...]) {
        [...]
        //Load posts based on criteria:
        // USER_ID is a known user id.
        this.firestore.collection('posts').ref.where('uid', '==', USER_ID).onSnapshot( (querySnapshot) => {

      querySnapshot.forEach((doc) => {

        //Found a single snapshot.
        //Get the data and push to the array

        this.posts.push(
           { 
            pid: doc.data().pid,
            uid: doc.data().uid, 
            message: doc.data().message, 
            timestamp: doc.data().timestamp, 
           }
        );

      });

    });
}
// This is just an example on how to query data, you can use your code to just load all the posts. 

In: post.component. html

После этого вы можете перечислить данные в файле html, как вы это сделали, но убрать знак $:

<div *ngFor="let p of posts">
Post ID: {{p.pid}}
Post message: {{p.message}} 
</div>

Данные должны быть предварительно просмотрены следующим образом Это пример для 2 загруженных сообщений :

Post ID: THE_ID_OF_LOADED_POST_01
Post message: This is the message of post 01
Post ID: THE_ID_OF_LOADED_POST_02
Post message: This is the message of post 02

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

Answer 2

Firebase предоставляет два типа баз данных. 1) База данных реального времени 2) Облачное хранилище пожаров

Если вы используете базу данных реального времени. Приведенный ниже код поможет вам

import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class TasksService {

  tasksList : AngularFireList<any>;

  constructor(private tasksdb : AngularFireDatabase) { }

  getTa`enter code here`sks() {
    this.tasksList = this.tasksdb.list('tasks');
    return this.tasksList;
  }
}

Если вы используете Cloud Firestore, это поможет вам

import { AngularFirestore } from '@angular/fire/firestore';

export class PolicyService {
  constructor(private firestore: AngularFirestore) { }

  getPolicies() {
    return this.firestore.collection('policies').snapshotChanges();
  }
}

Но убедитесь, что вы импортировали все необходимые модули Firebase в root модуль.