esta es la respuesta de mi servidor para consultas y respuestas ... es una matriz.

[
    {
        "id": 1,
        "product": 1,
        "user": "alex",
        "text": "is it ok?",
        "parent_id": null,
    },
    {
        "id": 2,
        "product": 1,
        "user": "john doe",
        "text": "yes its ok.",
        "publish": true,
        "parent_id": 1,
    },
      {
        "id": 3,
        "product": 1,
        "user": "shiva",
        "text": "how can i .. . .",
        "publish": true,
        "parent_id": null,
    },
]

el segundo elemento (id 2) es la respuesta a la pregunta 1 porque tiene partent_id = 1 y el id 3 es una pregunta independiente

Quiero mostrar cada respuesta bajo su propia pregunta en una lista ordenada anidada si la pregunta tiene alguna respuesta ... ¿cómo puedo hacer eso?

Hice algo así, pero creo que está muy mal ¿alguien puede guiarme para que lo haga correctamente? Gracia

my componente para obtener preguntas y respuestas

  this._store.viewSingleProductQA(this.product.product_id).subscribe(data => {
      this.questions = data;

     this.responses = this.questions.filter(d => d.parent_id == this.questions.id)
    });

html:

  <div>{{question?.user}}</div>
  <div>{{question.text}}</div>
</div>
<div *ngFor="let res of responses">
  {{res.text}}
</div>