在 Angular 4 中使用嵌套的 observables

Question

我想使用 http 和 observable 从 cmets.json 获取所有 cmets，我现在正在成功地做这件事，现在我只想在这个 observable 中循环这些“cmets”，这样对于每个演员 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>

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