Firestore Angular 文档中的集合

Question

我有每个讲师的文档集，我想为每个文档收集另一个评论集。 我找不到阅读该子集的方法。 这是结构：

我从这里的服务中获取特定的 id：

getInstructor(iid: string) {
    this.instructorDoc = this.afs.doc<Instructors>(`instructors/${iid}`);
    return this.instructorDoc.valueChanges();  
}

我在讲师页面上拨打 function：

getInstructor(): void {
    const iid = this.route.snapshot.paramMap.get('iid');
    this.instructorsService.getInstructor(iid).subscribe(instructor => this.instructor = instructor);   
}

我还有一个教师界面：

export interface Instructors {
  iid: string;
  first_name: string;
  last_name: string;
  category: string;
  location: string;
  description: string;
  photoURL: string;
}

最后我有这样的 instructor 组件的 html：

<div *ngIf="instructor" class="card" style="width: 18rem;">
  <img [src]="instructor.photoURL || '//:0'" alt="" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">{{ instructor.iid }} {{ instructor.first_name }} {{ instructor.last_name }}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
      content.</p>
  </div>
</div>

所有代码都有效。 我只是卡住了，不知道如何从这里转到 go。 我应该在讲师界面中以某种方式声明评论吗？ 还应该以某种方式获取评论的 id（可能在评论文档中添加 cid 字段）。 以及我将如何在 html 中显示评论内容。我是 JavaScript/TypeScript/Angular 的新手，也许这些事情很容易，但我无法在谷歌上找到有关特定情况的有用信息。

Answer 1

您应该能够执行以下操作以检索 Comment 文档：

getComment(iid: string, commentId: string) {
    this.commentDoc = this.afs.doc<Comment>(
        `instructors/${iid}/comments/${commentId}`
    );
    return this.commentDoc.valueChanges();  
}

使用此界面或类似界面：

export interface Comment {
    id?: string;
    content: string;
}

关于获取评论 ID，我认为这实际上取决于您在做什么。 例如，如果您的帖子包含多个人的多条评论，如果评论可以与之交互，最好将评论 ID 留在 HTML 标签内，以便可以检索它以执行查询。 在另一种情况下，您可能希望迭代所有评论，这会有所不同。

您问题的最后一个方面可能需要更多说明，并且可能值得另一个问题来更详细地介绍您的应用程序。

---

在评论中讨论问题后，我发现对应用程序的工作流程缺乏了解。 我将尝试解释缺少的内容，并展示如何修复它。

误解

设计的 web 具有在src/app/app-routing.module.ts中定义的路由。 定义了这些路由：

{
    path: '',
    redirectTo: '/instructors',
    pathMatch: 'full'
},
{
    path: 'instructors',
    component: InstructorsComponent
},
{
    path: 'instructors/:iid',
    component: InstructorDetailsComponent,
}

我们可以从那里了解到/instructors将充当索引页面，而/instructors/:iid将是每个教师的详细信息。

当用户转到您的主页并单击教师的个人资料时，请注意您是如何访问/instructors/:iid的。 因此，您只转发讲师的 ID ( iid )。 这是正确的，因为我们没有必要在 URL 上转发这个，我们只是检查指导员。

const cid = this.route.snapshot.paramMap.get('cid');

因此，文件instructor-details.component.ts中的上述行没有意义，因为它检索参数cid ，而该参数未在 URL 上转发以获取讲师的详细信息。

实际上，如果将该行更改为const cid = "a8OA7dCBNuNE8uTwgvhk" ，您将看到整个 function 有效，并且它正确显示在第一位讲师 ( 5EdG4liyxxjam9BrCt0T ) 的页面上。

使固定

据我了解，您想在讲师的详细信息页面上显示讲师的所有评论。 这意味着应用程序必须检索适当指导员的子集合comments并显示它们。

为了解决这个问题我修改了三个文件：

instructor-details.component.ts

首先必须删除参数cid的检索，因为它永远不会存在。 以下设置告诉我们 function InstructorsService.getComments将检索 instructor iid的所有评论并返回它们以显示它们。

getComments(): void {
    const iid = this.route.snapshot.paramMap.get('iid');
    this.instructorsService.getComments(iid).subscribe(comments => {
        this.comments = comments;
    });
}

instructors.service.ts 文件

现在这个 function 必须检索整个评论集合，而不是一个具有 id 的评论。 请注意， commentDoc现在已更改为commentCol并更改了其类型，因为查询现在正在检索整个集合而不是单个文档。

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

[..]

export class InstructorsService {
    instructorDoc: AngularFirestoreDocument<Instructors>;
    commentCol: AngularFirestoreCollection<Comments>;

    [..]

    getComments(iid: string) {
        this.commentCol = this.afs.collection<Comments>(`instructors/${iid}/comments`);
        return this.commentCol.valueChanges();
    }

}

instructor-details.component.html

在 HTML 组件中，它不再显示值，而是更改为迭代器ngFor ，因为该组件现在正在接收文档列表。

<div *ngFor="let comment of comments"> {{comment.content}} </div>