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

Question

I have a array of objects with id, and I need pass this id in other array; Example:

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

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

I'm need a ngFor to receive a product and commentary

<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>

Would work (inefficiently). It would be better architecture to join the comment to the product model in a service or similar for when you need to do this again.

Answer 2

I believe something like:

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

Where method commentsOfProd(id) would return array of filtered comments for the product.

Or a little more simply only in template:

<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>

It is not a rocket science with these directive. It works almost same as normal For or If in the code. So the second example is basically just cycle in cycle with a condition.