title: Display single ngrx entity within ngFor loop using Ids
body: <p>I'm using ng6 with NGRX to display two datasets in the view. The first dataset is the complete dataset. The second dataset is an subset of the first dataset.</p>
  
  <p>I need to use an ngFor loop on the second dataset, which provides an <code>id</code>, and within the loop use the <code>id</code> to display a single entity from the first dataset. </p>
  
  <p>component.ts</p>
  
  <pre><code>export class ViewComponent implements OnInit {
    datasetOne$: Observable&lt;data[]&gt;;
    datasetTwo$: Observable&lt;data[]&gt;;
  
    constructor(private store: Store&lt;fromStore.DatasetState&gt;) {}
  
    ngOnInit() {
      this.store.dispatch(new fromStore.LoadDatasetOne());
      this.store.dispatch(new fromStore.LoadDatasetTwo());
      this.datasetOne$ = this.store.select(fromStore.getDatasetOne);
      this.datasetTwo$ = this.store.select(fromStore.getDatasetTwo);
    }
  
  }
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let data of (datasetOne$ | async)"&gt;{{ data.name }}&lt;/li&gt;  
  &lt;/ul&gt;
  
  Subset:
  
  &lt;ul&gt;
      &lt;li *ngFor="let subData of (datasetTwo$ | async)"&gt;{{ subData.id }}&lt;/li&gt;  
  &lt;/ul&gt;
  </code></pre>
  
  <p>The view displays both subset correctly this far, names and ids (numbers)</p>
  
  <p>The <code>subData.id</code> corresponds to a name in datasetOne, I want to display the name instead of the <code>id</code></p>
  
  <p>Is it something like this for the view:</p>
  
  <pre><code>&lt;li *ngFor="let subData of (datasetTwo$ | async)"&gt;{{ getNameById(subData.id) }}&lt;/li&gt;
  </code></pre>
  
  <p>but I have not been successful in writing a method that can grab a single entity from <code>datasetOne$</code></p>