I'm new to angular. I somehow learned how to get data from firebase to my angular pages by following many tutorials. But I don't understand how to retrieve data to a particular user profile when that user gets logged in to his profile.
these are some of the ones that i tried out to get this thing working. but i got failed in all those attempts Retrieving user profile data from firebase and displaying How to display clicked user profile data in a different component?
venue-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-venue-profile',
templateUrl: './venue-profile.component.html',
styleUrls: ['./venue-profile.component.scss']
})
export class VenueProfileComponent implements OnInit {
users:Observable<any[]>;
constructor(private db:AngularFirestore) {
this.users = db.collection('register_user').valueChanges();
}
ngOnInit() {
}
}
venue-profile.component.html
<div class="main-content">
<div class="container-fluid">
<h1 class="ml-1" *ngFor = 'let user of users | async'>{{ user.user_name }}</h1>
<div class="row">
</div>
</div>
</div>
you can get data from firebase using snapshotChanges()
method. here I'm attached example
app.component.ts
// import service import { CrudService } from './services/crud.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { constructor(public crudService: CrudService) { } ngOnInit() { //get data from crud service this.crudService.getFFList().subscribe(data => { this.fflist = data.map(e => { return { id: e.payload.doc.id, ffdata: e.payload.doc.data(), }; }) }); } }
crud.service.ts
import { Injectable } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore'; @Injectable({ providedIn: 'root' }) export class CrudService { constructor(private firestore: AngularFirestore) { } //method for get data from firebase with collection name ff_list getFFList() { return this.firestore.collection('ff_list').snapshotChanges(); } }
app.component.html
<table> <thead> <th>id</th> <th>Short Form</th> <th>Full Form</th> <th>Action</th> </thead> <tbody> <tr *ngFor="let ff of fflist"> <td>{{ff.id}}</td> <td>{{ff.ffdata.ff_short}}</td> <td>{{ff.ffdata.ff_full}}</td> <td> <button (click)="delete(ff.id)">Delete</button> <button (click)="editFF(ff.id,ff.ffdata)">Edit</button> </td> </tr> </tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.