-1

two separate lists (arrays)
The second list contains references to first with matching IDs

Any hints on how to
Loop through list 1
If any, display matching items from list 2 under that

e.g.

list 1
ID: 1 Title: Yellow Green
ID: 2 Title: Oranges Potatoes
ID: 3 Title: Shoes And Kittens
...

list 2
ID: 1 text: Blah blah blah
ID: 2 text: Yakety yak yak
ID: 2 text: Oh boy this is good
...

Displaying something like this
--Yellow Green
Blah blah blah

--Oranges Potatoes
Yakety yak yak
Oh boy this is good

--Shoes And Kittens
(shows nothing here)

Mathias
  • 4,243
  • 4
  • 25
  • 34
  • I know how to do a *ngFor for one list. I just can't figure out how to get matching items from the second list under each item. – Mathias Mar 17 '18 at 20:31
  • https://stackoverflow.com/a/44273239/9034168 – Efe Mar 17 '18 at 20:42
  • Thanks Efe. Unfortunately, that example has all the data neatly in one list. I have two separate lists. – Mathias Mar 17 '18 at 20:48

1 Answers1

1

You have to use double *ngFor for this application (and 1 *ngIf), like this:

<div *ngFor="let item1 of arr1">
  -- {{item1.Title}}
  <div *ngFor="let item2 of arr2">
    <div *ngIf="(item2.ID === item1.ID)">{{item2.text}}</div>
  </div>
  <br/>
</div>

Here is your plunker for this application:

https://plnkr.co/edit/m8LXiwoBRo7MVULkBHKK?p=preview

Nikolay Zatonatskiy
  • 339
  • 1
  • 9