ANGULAR - Mapping nested JSON data from API

so I've been struggling for the past day or so with mapping the response from a mock API - I think I'm mapping it correctly but when I try to access the data it doesn't return anything in the HTML.

Please find my code below:

data.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ConsentData, Prompt } from '@app/models/consent-data';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ConsentWebviewDataService {
  constructor(private httpClient: HttpClient) {}

  getConsentData(): Observable<ConsentData<Prompt>> {
    return this.httpClient.get<ConsentData<Prompt>>(
      'MY_API_URL',
    );
  }
}

data.ts (interface)

export interface ConsentData<Prompt> {
  prompts: Prompt[];
}

export interface Prompt {
  promptId: number;
  headline: string;
  body: string;
  imageUrl: string;
  consents: string[];
  type: string;
}

app.component.ts

export class PromptComponent implements OnInit {
  consentData: any;

  constructor(private consentWebviewDataService: ConsentWebviewDataService) {}

  ngOnInit(): void {
    this.consentWebviewDataService.getConsentData().subscribe(data => {
      this.consentData = data.prompts.map(consents => {
        return {
          promptId: consents.promptId,
          headline: consents.headline,
          body: consents.body,
          imageUrl: consents.imageUrl,
          consents: consents.consents,
          type: consents.type,
        };
      });
    });
  }
}

Lastly here is the API JSON response:

{"prompts":[{"promptId":100,"headline":"Headline","body":"Body text.","imageUrl":"https://picsum.photos/200","consents":["Consent 1","Consent 2","Consent 3"],"type":"ConsentCampaign"}]}

From what I understand so far, after countless tutorials and resources, the getCosentData() function sends request to API, then in the component I subscribe to it, get the response, assign the response to the consentData variable, then map the contents of the response based on the interface / how the JSON response looks.

However, the problem is that I cannot access the mapped data in the HTML. I don't need it in a table, just need to get the mapped data.

I tried all variations such as {{ consentData.promptId }} which I mapped, and it returns ERROR TypeError: ctx.consentData is undefined. Tried {{ consents.promptId }} as well, etc. but nothing works.

What am I missing here? And apologies for the long question && thanks in advance for any help!