How do you run a function on the result of NgFor in Angular2?
<p>Consider a list of all of the users in your system:</p>

<pre><code>  allUsers = {
    a: {name:'Adam',email:'adam@testco.com',level:'admin',group:'Owners'},
    b: {name:'Barbra',email:'Barbra@testco.com',level:'admin',group:'Owners'},
    c: {name:'Chris',email:'Chris@otherplace.net',level:'standard',group:'Managers'},
    d: {name:'Dennis',email:'dsmolek@showman.com',level:'standard',group:'Managers'},
    e: {name:'Elizabeth',email:'eadams@testco.com',level:'standard',group:'Staff'},
    f: {name:'fred',email:'fred@testco.com',level:'visitor',group:'Visitor'},

  }
</code></pre>

<p>Then a list of the users on a project:</p>

<pre><code>usersList = ['a','b','d','f'];
</code></pre>

<p>So you have a nice easy function to take the user id and lookup the rest of the user details: </p>

<pre><code>  getUser(userId){
    console.log('Getting User with Id:', userId);
    if(allUsers[userId]) return allUsers[userId];
  }
</code></pre>

<p>Then in the template you use *ngFor to loop through the users in the list, but you want to then lookup the full set of details</p>

<pre><code>&lt;tr *ngFor="#userId in usersList" #user="getUser(userId)"&gt;
  &lt;td&gt;{{user.name}}&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>Doesn't work... 
Without creating custom components or other more complex stuff I can't figure out how to run the getUser function once per user. I can of course run it over and over like:</p>

<pre><code>&lt;td&gt;{{getUser(userId).name}}&lt;/td&gt;
</code></pre>

<p>but this doesn't seem like the best way. 
Is there an easier way to get access to the userId variable and set it as a local variable?</p>

<p><a href="https://plnkr.co/edit/KXS8n5fErhigNvtr0nUu?p=preview" rel="nofollow">Here's a plunker of what I've been playing with so far</a></p>