如果第二个数组的项包含数组的第一个对象的 id，则合并 Angular 8 中的两个对象数组

Question

我正在尝试合并两个对象数组，其中第一个数组有一个 json 文件，第二个相同，但第二个数组包含第一个对象数组的 id。我正在尝试将每个对象的第二个数组添加到第一个对象数组的正确项目中。正如你可以看到comments有一个 postId它知道它张贴所属。我的json文件看起来像这样。{  "posts": [    {      "userId": 1,      "id": 1,      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",      "body": "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"    },    {      "userId": 1,      "id": 2,      "title": "qui est esse",      "body": "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"    },    {      "userId": 1,      "id": 3,      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",      "body": "et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut"    },    {      "userId": 1,      "id": 4,      "title": "eum et est occaecati",      "body": "ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit"    },    {      "userId": 1,      "id": 5,      "title": "nesciunt quas odio",      "body": "repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque"    },和相同json但与另一个API获取数据。"comments": [    {      "postId": 1,      "id": 1,      "name": "id labore ex et quam laborum",      "email": "[e-mail]",      "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos tempora quo necessitatibus dolor quam autem quasi reiciendis et nam sapiente accusantium"    },

Answer 1

我建议按 postId 对评论进行分组，例如使用 lodash

this.groupedComments$ = this.comments$.pipe(

  map(comments => lodash.groupBy(comments, 'postId')),

);

然后你可以简单地在模板中访问这个对象

<tr class="row" *ngFor="let post of posts | async">

        <td class="col">{{post.title}}</td>

        <td class="col-6">{{post.body}}</td>

        <td class="col">

           <div *ngFor="let comment of groupedComments[post.id]">{{comment}}</div>

        </td>

        <td class="col"><button (click)="deletePost(post.id)" class="btn btn-danger">Delete</button>

          <button (click)="postDetails(post.id)" class="btn btn-info" style="margin-left: 10px">Details</button>

        </td>

      </tr>

（异步管道 groupedComments$ 之前的任何地方）

编辑：

interface Comment {

  postId: number;

  id: number;

  name: string;

  email: string;

  body: string;

}

interface CommentGroup {

  [key: number]: Comment[];

}

comments$: Observable<Comments[]>;

groupedComments$: Observable<CommentGroup>;