在Angular 4

Question

我希望使用http和observable从comments.json获取所有评论，我现在正在成功地做，现在我只想循环这些＆＃34;评论＆＃34;在这个可观察的内容中，对于每个actor id，我可以调用另一个函数并传递此id并获取用户详细信息。 在This Question

中做了类似的事情

我知道单独获取用户详细信息并不是一个好主意，但这是必需的。我想通过异步管道知道这一点，以便信息不断更新。

我有以下服务：

service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {IComment} from "../../comments";
import {Observable} from "rxjs/observable";

@Injectable()
export class CommentsDataService {

  private _url:string = "../../../../assets/json/comments.json";
  constructor(private http: HttpClient) {  }

  /**
   * Return Sample json for
   * Comment listing.
   * @param Id
   * @returns {json)
   */
  getComments():Observable<IComment[]>
  {
    return this.http.get<IComment[]>(this._url)
  }

  /**
   *
   * @param commentObj
   */

  saveComment(commentObj){

    console.log(commentObj);

  }

}

组件

 ngOnInit() {


    //Service call for Comments listing.
    this.commentsDataService.getComments()

    .subscribe(data=>this.commentsData = data)


  }

HTML：

<div class="container">

    <div class="row listCommentsContainer">
        <div class="col-lg-8 col-sm-8" *ngFor="let commentData of commentsData; let i = index">
          <ol style="list-style: none;">
          <li class="listComments">

            <div  style="display: block">
            <div style="display:inline-block;">
              <a class="avatar">

                <img style="" src="">
              </a>
            </div>
            <a class="commentPostByUserName">
              <span class="commentPostByUserName" style=""></span>
            </a>
              <div class="commentTime">{{commentData.time_stamp}}</div>
            </div>
            <div class="commentTextDisplay">{{commentData.object}}</div>

            <br>

            <!-- Click Reply -->
            <div class="addReplyContainer" #commentData.id>
              <a  class="addReplyLink"  (click)="showReplyTextArea($event, commentData.id)">Reply</a>
            </div>

            <!-- Add Reply -->
            <div [attr.commentId]="commentData.id" class="addReplyContainer replyTextAreaContainer" style="display: none" >
              <textarea (keyup)="keyUpCommentTextarea($event, reply, commentData.id)" (keyup.enter)="addReply($event, commentData.root_id)" [(ngModel)]="reply" style="width:100%"
                        class="replyText commentText addReplyTextarea form-control"></textarea>
              <button [attr.commentId]="commentData.id" disabled class="btn btn-success addCommentBtn" (click)="addReply($event, commentData.root_id)">Add</button>
            </div>
            <!-- ----------- -->

            <!-- List Replies -->


            <div class="replies col-lg-8 col-sm-8" *ngFor="let reply of commentData.comment">
              <ol style="list-style: none;">
                <li class="listComments listReplies">

                  <div  style="display: block">
                    <div style="display:inline-block;">
                      <a class="avatar">

                        <img style="" src="">
                      </a>
                    </div>
                    <a class="commentPostByUserName">
                      <span class="commentPostByUserName" style=""></span>
                    </a>

                  </div>
                  <div class="commentTextDisplay replyTextDisplay">{{reply.object}}</div>
                </li>
              </ol>
            </div>

            <!-- --------------- -->
          </li>
          </ol>
        </div>

    </div>

    <!-- Add Comment-->
    <div class="row">
      <div  class="addCommentContainer col-lg-6 col-sm-12">

          <textarea (keyup)="keyUpCommentTextarea($event, comment)"
                    [(ngModel)]="comment" class="commentText form-control"
                    placeholder="Add Comment">
          </textarea>
        <button  (click)="addComment($event)" class="btn addCommentBtn btn-success">Add</button>

      </div>
    </div>
</div>

comments.json

[{ "id":"123",
  "root_id":"234",
  "target_id": "2",
  "object":"Nice!",
  "actor":"user:123",
  "time_stamp": "2 mins ago",

  "comment":[
    {
      "id": "124",
      "root_id":"234",
      "target_id":"3",
      "object":"Well!!",
      "actor":"user:123",
      "time_stamp": "2 mins ago"
    },
    {
      "id": "125",
      "root_id":"234",
      "target_id":"3",
      "object":"Great!",
      "actor":"user:125",
      "time_stamp":""
    }
  ]
},
  {
    "id":"126",
    "root_id":"234",
    "target_id": "2",
    "object":"Super.",
    "actor":"user:124",
    "time_stamp": "2 mins ago",
    "comment":[
      {
        "id": "234",
        "root_id":"234",
        "target_id":"",
        "object":"Cool.",
        "actor":"user:123"

      },
      {
        "id": "236",
        "root_id":"234",
        "target_id":"3",
        "object":"hiii.",
        "actor":"user:123",

      }
    ]
  },  {
  "id":"345",
  "root_id":"234",
  "target_id": "12",
  "object":"Interesting.",
  "actor":"user:124",
  "time_stamp": "2 mins ago"
},  {
  "id":"444",
  "root_id":"234",
  "target_id": "12",
  "actor":"user:125",
  "object":"Cool.",
  "time_stamp": "2 mins ago"
},
  {
    "id":"567",
    "root_id":"234",
    "target_id": "12",
    "object":"Last Comment..",
    "actor":"user:125",
    "time_stamp": "2 mins ago"
  }
]

user.json

[
  {
    "profile_image":"/../../assets/images/no-user.png",
    "first_name" : "jack",
    "id":"124"
  },
  {
    "profile_image":"/../../assets/images/no-user.png",
    "first_name" : "john",
    "id":"125"
  },
  {
    "profile_image":"/../../assets/images/no-user.png",
    "first_name" : "simon",
    "id":"123"
  }
]

Answer 1

switchMap运算符是根据第一个结果进行更多异步调用的经典解决方案，实现如下：

getUser(id) {
   return this.http.get<User>('/user/ + id'); // don't know your actual user endpoint or interface but this is a sample
}

getCommentsWithUsers() {
    return this.getComments().switchMap(comments => // first we use switchMap to execute a new set of observables
         // map the comments into an array of requests for the user and combine with the forkJoin and map operator and object.assign
         (comments.length) 
            ? Observable.forkJoin(comments.map(comment => this.getUser(comment.actor).map(user => Object.assign(comment, {actor: user})) 
            : Observable.of([])); // empty check needed becuase forkJoin breaks with empty array
}

我对你的数据模式不够熟悉，说这可以完美地运行，你可能需要一些小的修改，但这个想法应该或多或少有效。

Answer 2

您可以尝试这样的事情

this.http.get('/comments')
   .map(res => res.json())
   .finally(() => this.isLoading = false) // here load actors
   .subscribe(
         data => this.orders = data,
         error => console.log(error)
   );