无法从 Firestore 获取数据

Question

我在从我的应用中的 firestore 获取显示数据时遇到问题。

当我启动应用程序时出现错误：

找不到不同类型的支持对象“[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

在将数据保存到 Firestore 和从 Firestore 加载数据时，我会采用不同的方法。我正在使用 Angular 进行 Ionic 4 开发，应用程序的结构与您的类似。

我存储数据和从 Firestore 数据库加载数据的方法：

在：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

1. 然后您必须将公共变量声明为 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. 

在：post.component.html

1. 之后，您可以像以前一样在 html 文件中列出数据，但删除 $ 符号：

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

4. 数据预览如下这是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) Cloud Firestore

如果您使用的是实时数据库。下面的代码会帮助你

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 模块。