Блог

Я пытаюсь отобразить весь ответ из этого json :

https://www.reddit.com/r/AskReddit/comments/k8w43d/people_with_the_last_name_pepper_who_have.json

Итак, в зависимости от загрузки post im и ответа, количество моих дочерних элементов будет отличаться. Как я могу перебирать его, пока не дойду до последнего ответа с дочерними элементами (body[2].data.children)?

Вот так :

 <div class="replies-box" *ngFor="let reply of comments.body[1].data.children">
       <div class="reply-header">
            <p class="reply-author"><b>From</b> : {{ reply.data.author }}</p>
            <p class="reply-send"><b>Send</b> : {{ this.getDateReply(reply.data.created_utc) }}</p>
       </div>
       <div class="text-first-reply" [innerHTML]="this.getHtmlDecode(reply.data.body_html)">
         
       </div>
</div>
 

У меня есть только первый уровень ответа, есть ли способ просто перебрать их все?
Заранее спасибо.

Я бы использовал подход рекурсивного типа.

Разработайте app-comment компонент, и если у комментария есть дочерние элементы, выполните цикл по дочерним элементам и отобразите app-comment . Таким образом, он будет перебирать комментарии до тех пор, пока не останется дочерних элементов

 <div *ngIf='comment'>
  <span *ngIf='comment.kind; else showComment'>Kind: {{ comment.kind }}</span>
  <ng-template #showComment>
    <span>{{ comment }}</span>
  </ng-template>
  <div>
   <app-comment *ngFor='let child of comment.data?.children' [comment]='child'> </app-comment>
  </div>
</div>
 

Смотрите этот пример иллюстрации

Просто используйте ngFor внутри ngFor с помощью ng-контейнера (не будет создавать дополнительные элементы dom)

 <div class="replies-box">
  <ng-container *ngFor="let commentBody of comments.body">
    <ng-container *ngFor="let reply of commentBody.data.children">
      <div class="reply-header">
        <p class="reply-author">
          <b>From</b> : {{ reply.data.author }}
        </p>
        <p class="reply-send">
          <b>Send</b> : {{ this.getDateReply(reply.data.created_utc) }}
        </p>
      </div>
      <div class="text-first-reply" [innerHTML]="this.getHtmlDecode(reply.data.body_html)">

      </div>
    </ng-container>
  </ng-container>
</div>