try to fetch data from api in angular but get error that Cannot find a differ supporting object '[object Object]' of type 'object'

My Angular version is 16.0.1 and I try fetch data from Api

https://dummy.restapiexample.com/api/v1/employees

this is my Model

export interface Emploee {
employee_name: string;
}

My service is

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Emploee } from '../models/emploee.model';

@Injectable({
providedIn: 'root'
})
export class EmploeeService {
_url = "https://dummy.restapiexample.com/api/v1/employees"
constructor(private http:HttpClient) { }
getEmploee():Observable<Emploee[]>{
  return this.http.get<Emploee[]>(this._url)
} }

And my component.ts is

import { Component } from '@angular/core';
import { Emploee } from '../models/emploee.model';
import { EmploeeService } from '../services/emploee.service';

@Component({
selector: 'app-emploee',
templateUrl: './emploee.component.html',
styleUrls: ['./emploee.component.scss']
    })
export class EmploeeComponent {
 emploee$! : Emploee[];
ngOnInit() {
this.fetchEmploee();
   }
constructor(private emploeeService:EmploeeService){}
fetchEmploee(){
this.emploeeService.getEmploee().subscribe(res=> this.emploee$ = res);
   }
   }

And this is my component.html

<p *ngFor="let emploee of emploee$">{{emploee.employee_name }}</p>

when I run my project i get this error

> Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only > supports binding to Iterables, such as Arrays

How can I resolve that?
also my project is in this link :https://stackblitz.com/edit/stackblitz-starters-xuvgju?embed=1&file=src%2Fmain.ts

and picture from postman is:

First, normally we use the $ prefix to indicate an Observable. You are using it on an array, which is confusing for anyone else looking at your code.

I thought you were missing the async pipe because I thought that the emploee$ variable was an observable.

But the actual problem is that the data being returned is not of the shape you have defined.

If you look at the data shape, it contains much more data then just the Emploee data.

Consider updating your interface to match the data shape.

Alternately, you could modify your getEmploee to access just the "data" property which seems to hold the actual employee data.

getEmploee():Observable<Emploee[]>{
  return this.http.get(this._url).pipe(
          map(value => value.data)
  );
}

I have a working Stackblitz here: https://stackblitz.com/edit/stackblitz-starters-5uprkt

For more information on RxJS, check out this video: https://youtu.be/vtCDRiG__D4