What I want to do: I'm trying to fetch data from my strapi api and display it.

What I'm working with: I'm working with Angular, Strapi (v4) and Akita, which I'm all completely new to and I'm using akita entity service.

Fetching the data works, but I can't display it. The collection type I'm trying to display is called question and has the the attribute name. There are 3 questions.

This is my component file:

export class HomePage {

  public questions$: Observable<Array<Question>> | undefined;

  constructor(
    protected readonly questionsService: QuestionsService,
    protected readonly questionsQuery: QuestionsQuery,
  ) {
     this.questionsService.get()
          .subscribe(console.log); 
     this.questions$ = this.questionsQuery.selectAll();
  }
}

This is my html file. Here I want to display the question by accessing the name attribute:

<ng-container *ngIf="(questions$ | async) as questions">
    <p *ngFor="let question of questions; let i = index;">
       Index: {{ i }} -
       Question: {{ question }} -
       id: {{ question.id }}
       <!--{{ question.attributes.name }} DOES NOT WORK.. Error Message: ERROR TypeError: Cannot read properties of undefined (reading 'name')-->
    </p>
</ng-container>

This is what my question model looks like (I feel like here is the problem):

export interface Question {
   id?: number;
   attributes: {
        name: string;
   };
}

This is what I see in my frontend:

Index: 0 - Question: [object Object],[object Object],[object Object] - id:
Index: 1 - Question: [object Object] - id:

It seems like all three questions are in the first index of the array. The data I get from the api looks like this: data response from api

So it seems like the data property is in the first index of the array and the meta array is in the second one. But I don't know what to do about it. Any Ideas? What I tried: change the model, but it didn't have any effect.