Hi , I’m experimenting with Cloud Firestore use angularfire 2, I can read the content from the Document, but
I want to get the ID of the document to delete or update a field or the whole document.
I know that the value change () method gives me all the fields without ID and the snapshot Change () gives me the fields and even the metadata, but if I use the latter I do not know how to put it in my view with an * ngFor ()
DATABASE PROVIDER
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable'; // Importacion del observable
import 'rxjs/add/operator/map'; // no se porque se hace esto
@Injectable()
export class DatabaseProvider {
private shirtCollection: AngularFirestoreCollection<Shirt>;
shirts: Observable<ShirtId[]>;
constructor(public http: HttpClient,
private readonly db: AngularFirestore) {
console.log('Hello DatabaseProvider Provider');
}
getDocument(collectionObj: string): Observable <any[]> {
this.shirtCollection = this.db.collection<Shirt>('items');
return this.shirtCollection.valueChanges();
}
}
export interface Shirt { name: string; Descripcion: string; }
export interface ShirtId extends Shirt { id: string; }
HOME TS
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { DatabaseProvider } from '../../providers/database/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
export interface Data{ id: string; name: string; descripcion: string}
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private Datos: Observable<any[]>;
data: Observable<Data>;
constructor(public navCtrl: NavController, public afAuth: AngularFireAuth,
private readonly database: DatabaseProvider) {
this.Datos = database.getDocument('items');
this.Datos.subscribe(result => {
this.PruebaObservable(result);
});
}
Logout() {
this.afAuth.auth.signOut();
this.navCtrl.popToRoot();
}
}
HOME HTML
<ion-header>
<ion-navbar>
<ion-title>
User
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="Logout()">
<ion-icon name="md-contact"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card *ngFor="let dato of Datos | async">
<ion-card-header>
{{ dato.id}}
</ion-card-header>
<ion-card-content>
<strong> {{dato.name}}</strong> <br><br>
{{dato.Descripcion}}
</ion-card-content>
</ion-card>
<i/on-content>
I want to have the ID in the view to send it in the method and thus be able to delete it, update it or whatever you need.
Something like that:
<ion-content padding>
<ion-card *ngFor="let dato of Datos | async">
<ion-card-header>
{{ dato.name}}
</ion-card-header>
<ion-card-content>
{{dato.Descripcion}}
<button (click) = 'Delete(dato.id)' >Borrar</button>
<button (click)= 'Update(dato.id)' >Actualizar</button>
</ion-card-content>
</ion-card>
</ion-content>