angular 5 exibe perguntas aninhadas e item de resposta ao item principal

esta é a resposta do meu servidor para perguntas e respostas ... é uma 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,
    },
]

o segundo item (id 2) é resposta para a pergunta 1 porque tem partent_id = 1 e id 3 é pergunta independente

Eu quero mostrar cada resposta sob sua própria pergunta na lista ordenada aninhada se a pergunta tiver alguma resposta .. como posso fazer isso?

Eu fiz algo assim, mas acho que é completamente errado alguém pode orientar o meu para fazer isso corretamente? obrigado

meu componente para obter perguntas e respostas

  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>

questionAnswers(2)

yourAnswerToTheQuestion