To jest moja odpowiedź na serwer na pytania i odpowiedzi .. Jest to tablica.

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

Drugi element (ID 2) jest odpowiedzią na pytanie 1, ponieważ ma Partent_id = 1 i ID 3 jest niezależnym pytaniem

Chcę pokazać każdej odpowiedzi w ramach własnego pytania w zagnieżdżonej listy zamówionej, jeśli pytanie ma jakieś odpowiedź .. jak mogę to zrobić?

Zrobiłem coś takiego, ale myślę, że to całkowicie źle, czy ktoś może prowadzić do tego poprawnie? dzięki

Mój komponent na pytań i odpowiedzi

  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>
2
devmrh 2 czerwiec 2018, 11:35

3 odpowiedzi

Najlepsza odpowiedź

Wypróbuj ten HTML, gdzie odpowiedzi są następujące

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>

Sprawdź to Fiddle

1
Nandita Sharma 2 czerwiec 2018, 09:07

Jeśli ma odpowiedź (nie odpowiedź odpowiedzi) zawsze możesz to zrobić

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

Lub "map" tablica, aby utworzyć nową listę pytań i odpowiedzi

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....
               }
          })

Edytowane: Wypełnienie odpowiedzi, którą możemy się podobać

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

Lub lepiej, jeśli istnieją odpowiedź odpowiedzi ... możemy dokonać rekurencyjnej funkcji

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)

Wtedy możemy zrobić komponent

@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>
1
Eliseo 2 czerwiec 2018, 12:26

Zaakceptowana odpowiedź działająca na pytanie o jeden poziom. Jeśli naprawdę chcę pracować w scenariuszu zagnieżdżony: sprawdź poniższą opcję

  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[];
 }
0
Sachin Karche 19 wrzesień 2019, 07:54