如何获取ngFor数据以获取另一个ngFor中的ID-Angular5

Question

我有一个ID为ID的对象数组，我需要在另一个数组中传递ID。 例：

    product = [
      { id: 1, name: teste }, { id: 2, name: teste 2 }
    ]

    comment = [
      {product_id: 1, comment: lorem ipsum }
    ]

我需要ngFor才能收到产品和评论

<div *ngFor="let prod of product">
 {{prod.name}}
 <div class="comments">
 /* i need pass comment object from product_id == prod.id /*
 how do I do that?
 </div>
</div>

Answer 1

<div *ngFor="let prod of product">
  <div *ngFor="let c of comment">
    <span *ngIf="c.product_id === prod.id">{{ c.comment }}</span>
  </div>
</div>

会（效率低下）。 将comment到服务或类似product中的product模型中是更好的体系结构，以备您需要再次执行此操作时使用。

Answer 2

我相信类似：

<div *ngFor="let prod of product">
  {{prod.name}}
  <div class="comments">
    <div *ngFor="let comment of commentsOfProd(prod.id);">
       {{ comment.comment }}
    </div>
  </div>
</div>

其中，方法commentsOfProd（id）将返回该产品的过滤后评论数组。

或者仅在模板中简单一点：

<div *ngFor="let prod of product">
 {{prod.name}}
  <div class="comments">
    <div *ngFor="let comment of comments">
       <div *ngIf="comment.product_id == prod.id">
         {{comment.comment}}
       </div>
     </div>
   </div>
 </div>

这些指令并不是一门火箭科学。 它的工作原理与代码中的常规For或If几乎相同。 因此，第二个示例基本上只是带有条件的循环。