从id上的Firestore集合中按ID检索文档

Question

I have a collection of activities in which there are multiple documents. I want to retrieve a specific document on click button.

Collection : activities

Document id : Auto-id

Fields : activityid, locked, section, maxPlayers, name

here i am retrieving the whole collection as

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

And i am showing these collections into the table as;

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

I passed an argument of id on OnEdit() function. In OnEdit function i want to retrieve a selective document by id. And show that document fields in the model as:

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

I tried so many thinks but dont work. It always shows all the documents. I want to retrieve only that document which is click by a button.

Answer 1

Edit : In your activities.component.html file:

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

and in activities.component.ts file:

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

You have to declare an activity variable in your activities.component.ts file just like you do with activities variable , and you can use it in your modal template instead of activities no need to *ngFor directive .