Question

这是我对队列和答案的服务器响应..它是一个数组。

[
    {
        "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是独立的问题

我想在嵌套的orded列表中显示每个自己问题的回复如果问题有任何回应......我怎么能这样做？

我做过这样的事情，但它认为任何人都可以指导我做正确的错误吗？感谢

我的组件获取问题和答案

  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>

Answer 1

试试这个HTML，其中的响应如下

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>

选中此fiddle

Answer 2

如果只有响应（不是响应的响应），你总是可以做

<div *ngFor="let q of questions>
   <!--only want to show the question, not the answer-->
   <div *ngIf="!q.parent_id> 
      {{q.user}}{{q.text}}
      <div *ngFor="let a of question.filter(t=>t.parent_id==q.id)>
          response:{{a.user}}{{a.text}}
      </div>
   <div>
</div>

或＆＃34; map＆＃34;数组创建一个新的问答列表

this.questionAndAndwers=this.question
          .filter(q=>!q.parent_id)
          .map(q=>{
               let answer=this.question.find(i=>i.parent_id==q.id)
               return {...q,
                       a_user:answer?answer.user:null,
                      a_text:answer?answer.text:null
                      ..others properties....
               }
          })

编辑：完成答案我们可以像

那样映射

this.questionAndAndwers=this.question
          .filter(q=>!q.parent_id)
          .map(q=>{
               return {...q,
                       answers:this.question.filter(i=>i.parent_id==q.id)
               }
          });

或者更好的是如果有答复的回复......我们可以做一个递归函数

getAnswers(questions:any,id:any)
  {
    return questions
           .filter(i=>i.parent_id==id)
           .map(q=>{
             return {...q,
                     answers:this.getAnswers(questions,q.id)}
           })
  }
//And
this.questionAndAndwers=this.getAnswers(this.question,null)

然后我们可以制作一个组件

@Component({
  selector: 'app-question',
  template: `<div *ngFor="let q of questions">
              {{q.user}}{{q.text}}
              <app-question [questions]=q.answers></app-question>
           </div>`
})
export class QuestionComponent  {
  @Input() questions: any;
}

//In our app.component
<app-question [questions]="questionAndAndwers"></app-question>

Answer 3

接受的答案适用于一级问题。如果真的想在嵌套方案中工作：请检查以下选项

  export class QuestionList
  {
    questions:Question[];
  }

  export class Question
  {
   text:string;
   answer:Answer;
   nextquestions:QuestionList;
 }

export class Answer
{
  text:string;
}


@Component({
 selector: 'question-view',
 template: `<ul>
        <li *ngFor="let q of questions">
          {{q.text}}:{{q.answer.text}}
          <question-view [questions]=q.nextquestions></question-view>
       </li></ul>`
   })


  export class QuestionViewComponent  {
  @Input() questions: any[];
 }

angular 5显示嵌套的问题和答案显示项目下的父项

3 个答案: