Angular Service to Retrieve data from Firestore

I am trying to design a service in Angular to fetch data from firestore which I need help in I will attach a code snippet of my service as well as a photo of the firestore collection and website where data is to be displayed.

import { Injectable } from '@angular/core';
import { User } from '../shared/user';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class UserdataService {

  private currentUser: firebase.User = null;

  constructor(private afs: AngularFirestore,
    private authService: AuthService ) {
      this.authService.getAuthState()
      .subscribe((user) => {
        if (user) {
          // User is signed in.
          this.currentUser = user;
        } else {
          this.currentUser = null;
        }
      });
  }

 

  getUserdata(): Observable<User[]> {
    return this.afs.collection<User>('userdata').snapshotChanges()
    .pipe(map(actions => {
      return actions.map(action => {
        const data = action.payload.doc.data() ;
        const _id = action.payload.doc.id;
        return { _id, ...data };
      });
    }));
  }



 
}

firestore collection

website

Please can I get a code regarding the getUserdata function Appreciate All the Help