api data shwoing in the user intefrace but when i print in console i get the data correctly

Question

api data shwoing in the user intefrace but when i print in console i get the data correctly and i know the error is just simple but i didnt find it ! i tried all ways to display data from the database. Data is coming from the database however it doesn't display any records on the UI. here is my service :

    const httpOptions = {
      headers: new HttpHeaders({'Content-Type': 'application/json'})
    };
    const apiUrl = "http://localhost:3000/service/findServices";
    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {
      constructor(private http: HttpClient) { }
    
      private handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
          console.error('An error occurred:', error.error.message);
        } else {
          console.error(
            `Backend returned code ${error.status}, ` +
            `body was: ${error.error}`);
        }
        return throwError('Something bad happened; please try again later.');
      }
    
      private extractData(res: Response) {
        let body = res;
        return body || { };
      }
    
      getDataService(): Observable<any> {
        return this.http.get(apiUrl, httpOptions).pipe(
          map(this.extractData),
          catchError(this.handleError));
      }
    }

and here is my ts file :

    export class Tab1Page {  
      dataService: any;   
      constructor(public api: ApiService) {}  
      ngOnInit() {
          this.getDataService();
      }   
      async getDataService() {
        await this.api.getDataService()
          .subscribe(res => {
            console.log(res);
            this.dataService = res.results;
            console.log(this.dataService);
          }, err => {
            console.log(err);
          });
      }

and finally my html file

    <ion-item *ngFor="let data of dataService">
         
            <ion-label>
              <h3 ion-text color="primary">{{data.name}}</h3>
              <p>price : {{data.price}}</p>
              <p>description : {{data.description}} </p>
            </ion-label>
             </ion-item>
      </ion-list>

thanks for ur help in advance