从 Angular 上的 firestore 集合中按 id 检索文档

Question

我有一个包含多个文档的活动集合。我想在单击按钮上检索特定文档。

收藏：活动

文档 ID：自动 ID

字段：activityid、locked、section、maxPlayers、name

我在这里检索整个集合

this.activities = afs.collection('activities', x => x.orderBy('section', 
'asc')).valueChanges();

我将这些集合显示为；

<tr *ngFor="let activity of activities | async  | paginate: { itemsPerPage: 10, currentPage: p }; let i =index">
    <td>
        {{activity.section}}
    </td>
    <td >
        {{activity.name}}
    </td>
    <td>
        {{activity.maxPlayers}}
    </td>
    <td>
        {{activity.locked}}
    </td>
    <td>
        <button type="button" class="btn btn-success" 
            (click)="onEdit(activity.id);  secondModal.show() "><i 
            class="fa fa-pencil"></i>
                       Edit
        </button>
</td>

我在 OnEdit() 函数上传递了一个 id 参数。在 OnEdit 函数中，我想按 id 检索选择性文档。并将模型中的文档字段显示为：

<div *ngFor="let activity of activities | async >
    {{activity.section}}        
    {{activity.name}}                    
    {{activity.maxPlayers}}                    
    {{activity.locked}}

我尝试了很多想法，但没有奏效。它始终显示所有文件。我只想检索通过按钮单击的文档。

Answer 1

编辑： 在您的activities.component.html 文件中：

  <td>
    <button type="button" class="btn btn-success" 
      (click)="onEdit(activity);  secondModal.show()"><i 
      class="fa fa-pencil"></i>
        Edit
     </button>
  </td>

在activities.component.ts 文件中：

onEdit(activity){ 
  this.afs.doc("activities/"+activity.id).valueChanges();
  this.activity = activity;
  ..... your code
}

你必须在你的activities.component.ts 文件中声明一个activity 变量，就像你对activities 变量所做的那样，你可以在你的模态模板中使用它而不是活动而不需要*ngFor 指令。