Angularfire: Firestore Delete Issue (Not Deleting Doc Within Collection)

[callen5914]

Angular:
angular/core": "^4.0.0"

Firebase:
"firebase": "^4.5.0",

AngularFire:
angularfire2": "^5.0.0-rc.2"

Other (e.g. Ionic/Cordova, Node, browser, operating system):
MacOS, Chrome

Expected behavior

When I click the "x" icon the document found within the collection should delete.

Actual behavior

Absolutely Nothing. I can console log the announcement that needs to deleted to ensure I can get the ID and other data. Thats working fine. However, the delete action never gets called.

Code Sample

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

export interface Announcement { title: string; body: string }
export interface AnnouncementId extends Announcement{ id?: string };

@Component({
  selector: 'app-announcement-list',
  templateUrl: './announcement-list.component.html',
  styleUrls: ['./announcement-list.component.css']
})
export class AnnouncementListComponent implements OnInit {

  private announcementCollectionRef: AngularFirestoreCollection<Announcement>;
  announcements: Observable<AnnouncementId[]>;

  constructor(private afs: AngularFirestore) { 
    this.announcementCollectionRef = afs.collection<Announcement>('announcements', ref => ref.orderBy('createdAt', 'desc'));
    this.announcements = this.announcementCollectionRef.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as AnnouncementId;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }


  ngOnInit() {
    //console.log("Hello");
  }

  removeAnnouncement(announcement: AnnouncementId){
    console.log(announcement);
    this.announcementCollectionRef.doc(announcement.id).delete();
  }

}

<div class="item" *ngFor="let announcement of announcements | async" style="margin-bottom: 40px;">
    <div class="content">
        <a class="ui header">{{ announcement.title }}<span style="float: right;"><i class="remove icon" (click)="removeAnnouncement(announcement)"></i></span></a>
        <div class="meta">
            <span>{{ announcement.createdAt }}</span>
            <p style="font-style: italic;">Signed: {{ announcement.signedBy }}</p>
        </div>
        <div class="description" style="margin-top: 10px;">
            <p style="padding: 10px; background-color: #e1e1e1">{{ announcement.body }}</p>
        </div>
    </div>
</div>

[markgoho]

Hey @callen5914 is this still broken in rc3?

[callen5914]

Yes indeed. I’m glad you mentioned that. I did the update thinking maybe I was behind in release. So at least I am thinking like others. Is there a good plugin for chrome that I can debug click events?

[callen5914]

I think I might be onto something here.

When I console log the announcement it gives the whole object. I can clearly see the ID of document I wish to delete. However when I console log out this:

console.log(this.announcementCollectionRef.doc(announcement.id));

I get something completely different. The ID is way different!

[callen5914]

When I try this:

 console.log(this);

I get this in the console:

Operator: MapOperator {thisArg: undefined, project: ƒ}

Does this mean anything to you guys? Is it possible the ID of the Doc is never being passed?

[callen5914]

Ooh even better!
When I use:

console.log(this.announcementCollectionRef.ref.doc().path);

I get back:

announcements/GB1MWkVsFHY4tKZj4w2M

Which if this is actually supposed to be the ID, it should have been:

So if I "Hard Code" in the ID like:

this.announcementCollectionRef.doc('VqnGFugIvLLGTuajg85q').delete();

The Announcement will indeed be deleted! So maybe there is an issue with how the metadata is being stored somehow. Like it's not matching what Firebase has.

[katowulf]

Can anyone verify whether this is actually an AngularFire2 issue by trying this with the vanilla SDK? Wondering where this should be getting reported and whom should get pinged to investigate.

[callen5914]

Okay, so I have figured it out. I feel so foolish for not catching this. In my app I have a parent component with two children one child is the form used to create a doc and the other child is the list of all docs within a collection. The form component was using valueChanges() with a field generated id. The listing component was built using the snapshotChanges(). So the id's were never lining up.

[jamesdaniels]

Glad to see you sorted it out.

I'll put create, update, and delete in the examples; that way it's demonstrated.