*ngIf does not display returned results from API

Question

I have a simple Angular app (Angular: 15.1.4) running in Azure using Static Web App and Azure Functions as the API. The app currently gets all records and displays them in a table using ngFor however i have a "view detail" component using a ngIf that doesnt display anything.

The API is returning the data correctly in JSON format however its not being displayed on the page:

Network Trace from Inspect

component.html

<div *ngIf="haction">
  <h2>{{haction.serverName | uppercase}} Details</h2>
  <div><span>id: </span>{{haction.id}}</div>  
  <button type="button" (click)="goBack()">go back</button>
  <button type="button" (click)="save()">save</button>
</div>`

component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Haction } from '../haction';
import { HactionService } from '../haction.service';

@Component({
  selector: 'app-haction-detail',
  templateUrl: './haction-detail.component.html',
  styleUrls: ['./haction-detail.component.css']
})
export class HactionDetailComponent implements OnInit {
  haction: Haction | undefined;

  constructor(
    private route: ActivatedRoute,
    private hactionService: HactionService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getHaction();
  }

  getHaction(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.hactionService.getHaction(id)
      .subscribe(haction => this.haction = haction);
  }


  goBack(): void {
    this.location.back();
  }

  save(): void {
    if (this.haction) {
      this.hactionService.updateHaction(this.haction)
        .subscribe(() => this.goBack());
    }
  }
}

service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Haction } from './haction';

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

  private getHactionsUrl = 'api/getHiveActions';  // URL to web api
  private getHactionUrl = 'api/getHiveAction';  // URL to web api

  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };

  constructor(
    private http: HttpClient,
    private messageService: MessageService) { }

  /** GET Hive Actions from the server */
  getHactions(): Observable<Haction[]> {
    return this.http.get<Haction[]>(this.getHactionsUrl)
      .pipe(
        tap(_ => this.log('fetched hive actions')),
        catchError(this.handleError<Haction[]>('getHactions', []))
      );
  }


  /** GET hero by id. Will 404 if id not found */
  getHaction (id: number): Observable<Haction> {
    const url = `${this.getHactionUrl}?id=${id}`;
    return this.http.get<Haction>(url).pipe(
      tap(_ => this.log(`fetched haction id=${id}`)),
      catchError(this.handleError<Haction>(`getHaction id=${id}`))
    );
  }
}`