角度5显示嵌套的问题和答案在其下显示项目父项目 [英] angular 5 display nested questions and answer show item under it parent item

问题描述

这是我的服务器对问题和答案的响应.它是一个数组.

this is my server response for quetions and answers.. its a array.

[
    {
        "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,
    },
]

第二项(id 2)是问题1的答案，因为它的partent_id = 1，而id 3是独立问题

the second item ( id 2 ) is response for question 1 because it have partent_id = 1 and id 3 is independent question

我想在嵌套顺序列表中显示其自己的问题下的每个回复 如果问题有任何答复..我该怎么办?

i want to show each responses under its own question in nested orded list if the question have any response.. how can i do that ?

我确实做了这样的事情，但它认为这完全错了，有人可以指导我正确地做到这一点吗?谢谢

i did somthing like this but it think it complatly wrong can anyone guide my to do that correctly ? thanks

获取问题和答案的我的组件

my component for get questions and answers

  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>

推荐答案

尝试使用此HTML，其响应如下所示

Try this HTML, where responses is as follows

responses = [
    {
        "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,
    },
]

<div *ngFor="let res of responses">
  <div *ngIf="res.parent_id === null">
    Ques : {{res.text}}
    <br/>
    Answers :
    <ng-container *ngFor="let res2 of responses">

       <div *ngIf="res2.parent_id === res.id">
         {{res2.text}}
       </div>
    </ng-container>
  </div>

</div>

选中此小提琴

这篇关于角度5显示嵌套的问题和答案在其下显示项目父项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！