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

Posted 2023-03-13

【中文标题】angular 5显示嵌套的问题和答案在它的父项下显示项目

【英文标题】：angular 5 display nested questions and answer show item under it parent item

【发布时间】：2018-11-12 06:42:49

【问题描述】：

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

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

我想在嵌套的有序列表中显示每个答案在其自己的问题下 如果问题有任何回应..我该怎么做？

我做了这样的事情，但它认为这是完全错误的，谁能指导我正确地做到这一点？谢谢

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

  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>

【参考方案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

【参考方案2】：

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

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

或“映射”数组以创建新的问题和答案列表

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)
               
          );

如果有reply of reply的reply更好……我们可以做一个递归函数

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.userq.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>

【讨论】：

你的代码给了我 question.filter() 的模板解析错误，你能修复它吗？

我忘了一个>，是.filter(q=>!q.parent_id)

【参考方案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[];