Как вы запускаете функцию по результату NgFor в Angular2?

Question

Рассмотрим список всех пользователей в системе:

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'}, 

    } 

Затем список пользователей на проекте:

usersList = ['a','b','d','f']; 

Таким образом, вы имеете хорошую легкую функцию взять идентификатор пользователя и поиск остальных деталей пользователя:

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

затем в шаблоне вы используете * ngFor Перебери пользователь в списке, но вы хотите, чтобы затем LookUp полного набор деталей

<tr *ngFor="#userId in usersList" #user="getUser(userId)"> 
    <td>{{user.name}}</td> 
</tr> 

Не работает ... Без создания пользовательских компонентов или других более сложных вещей, я не могу понять, как запустить функцию GetUser один раз для каждого пользователя. Я могу, конечно, использовать его снова и снова:

<td>{{getUser(userId).name}}</td> 

но это не похоже на лучший способ. Есть ли более простой способ получить доступ к переменной userId и установить ее как локальную переменную?

Here's a plunker of what I've been playing with so far

Answer 1

Хотя вы можете создать переменную по директиве шаблона ngFor, но эта переменная может принимать только значение индекса, даже, нечетные & последнего.

Вот почему я мог бы использовать трубу для этого случая, когда вам нужно передать usersList & allUsers обычаю @Pipe getUsers (он будет действовать так же, как фильтр в Angular1).

Markup

<tr *ngFor="let user of usersList | getUsers: allUsers"> 
    <td> 
    {{user.name}} 
    </td> 
    <td> 
    {{user.email}} 
    </td> 
    <td> 
    {{user.level}} 
    </td> 
    <td> 
    {{user.group}} 
    </td> 
</tr> 

Код

@Pipe({ 
    name: 'getUsers', 
    pure: false 
}) 
export class GetUserPipe implements PipeTransform { 
    constructor(){ 
    this.test = 'Test'; 
    } 
    transform(array:Array<string>, object: any) : any { 
    // for..in loop 
    let output = []; 
    for (var num in array) 
    { 
     // somehow object goes inner side 
     output.push(object[0][array[num]]); 
    } 
    console.log(output) 
    return output; 
    } 
} 

Demo Plunkr

Answer 2

Мне нравится

<td>{{getUser(userId).name}}</td> 

Вот что я буду использовать. Это намного проще, чем создание, скажем, трубы/фильтра.

Даже если вы можете что-то сделать с помощью локальной переменной шаблона, я считаю, что она будет переоценена для каждого элемента в списке, каждый цикл обнаружения изменений, как и HTML, показанный выше.

См. Также ng2: How to create variable in ngFor loop, где одним из предложений является создание дочернего компонента и передача getUser(userId) в свойство ввода этого компонента.