Cant Receive Nest Mongo Database JSON Array in Angular Component

Question

I am doing a test run from my Nest backend connected to MongoDB/Mongoose, where everything is working between Nest and MongoDB Cloud using Postman. I am just clicking a button in an attempt to receive the data in Angular and set to a variable.

However, when I try to bring the data to the frontend to accept the data and assign to a variable and ultimately send the data to NGXS state I cannot read(log) the data as an object, I am only able to display the data in the html using an async pipe, which isn't the end goal, just where Ive gotten so far with tutorials.

In my service I call the basic login data:

  getDisplay() {
    let response = this.httpClient.get('http://localhost:3000/');
    return response;
   }

Then in the nav component where I have the button(that triggers dbTest). The JSON should return as an array of one of my models so UserRegister[], but I have been applying that in places as well as trying to subscribe in different places but none seem to work out. I thought restricting the observable dbData$ to receive the type UserRegister and enacting async await or subscribe would work and force it to a manipulable object to send to state would work, but no luck.

export class NavComponent implements OnInit {
      dbData$: Observable<any> | undefined;  

      dbTest() {
          this.dbData$ = this.authService.getDisplay();
          console.log('after');
          console.log(this.dbData$);
      }}

But in the html I actually will receive the data to display, because of async pipe I would assume.

<div *ngFor="let item of dbData$ | async">
   <div>{{ item.username }}</div>
   <div>{{ item.email }}</div>
</div>

Display in html actually showing values from MongoDB through Nest, It works!

Also, this is the console showing the log of the value as some 'LiftedSource'? which im not seeing much about in search as well as...the http response with the actual values I would like to push to state(obviously I wouldn't send password to state, but this a basic starter to get to the real data I want to send to state)

Console After button click activating dbTest

Answer 1

MikeOne Answered above. Thank you!

All I had to do was subscribe to dbData$ after the expression going to the authService.

I think I had tried chaining the subscribe after getDisplay() and it was not accepting it

updated function in the component is

  dbTest() {
     this.dbData$ = this.authService.getDisplay();
     this.dbData$.subscribe((data:any)=> {console.log(data)})
     console.log('after');
     console.log(this.dbData$);
     }