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

声明我要将数据存储为的接口类型。在文件开始处的导入方法下面，将其声明为以下内容：

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

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

之后，您可以像以前一样在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）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模块。

无法从Firestore提取数据

2 个答案: