How to iterate array within an angular ngFor/Ionic

Question

I have the following model:

export interface Perguntas{
     historico:[{id_historico: number, resposta_historico: string}]
}

In my file ts I perform an http request for a service that returns these filled data, if I give a console.log(this.questions), I get my data as follows:

I need to iterate this data in my template, I tried something like:

<ion-card *ngFor="let pergunta of perguntas; let i = index">

<p>{{pergunta.data}}</p>

Here works correctly, my problem is in iterating the historical array, I tried:

<div class="message">{{pergunta.historico.pergunta_historico}}</div>

Why doesn’t it work? No error message is shown on my console, however the value is not shown.

Answer 1

The question.historico is also an array. You need to iterate this array. Something like:

<div class="message" *ngFor="let historico of pergunta.historico> 
    {{historico.pergunta_historico}}
</div>