你如何在 Angular2 中对 NgFor 的结果运行一个函数? [英] How do you run a function on the result of NgFor in Angular2?

问题描述

考虑系统中所有用户的列表:

Consider a list of all of the users in your system:

  allUsers = {
    a: {name:'Adam',email:'[e-mail]',level:'admin',group:'Owners'},
    b: {name:'Barbra',email:'[e-mail]',level:'admin',group:'Owners'},
    c: {name:'Chris',email:'[e-mail]',level:'standard',group:'Managers'},
    d: {name:'Dennis',email:'[e-mail]',level:'standard',group:'Managers'},
    e: {name:'Elizabeth',email:'[e-mail]',level:'standard',group:'Staff'},
    f: {name:'fred',email:'[e-mail]',level:'visitor',group:'Visitor'},

  }

然后是项目中的用户列表:

Then a list of the users on a project:

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

所以你有一个很好的简单函数来获取用户 ID 并查找其余的用户详细信息:

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

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

然后在模板中使用 *ngFor 循环遍历列表中的用户，但随后您想查找完整的详细信息集

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

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

没用...如果不创建自定义组件或其他更复杂的东西，我无法弄清楚如何为每个用户运行一次 getUser 函数.我当然可以一遍又一遍地运行它:

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:

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

但这似乎不是最好的方法.有没有更简单的方法来访问 userId 变量并将其设置为局部变量?

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?

这是我迄今为止一直在玩的东西

推荐答案

虽然你可以在 ngFor 模板指令上创建一个变量，但该变量只能取 index、even、odd & 的值.最后的.

Though you can create a variable on ngFor template directive, but that variable can only take value of index, even, odd & last.

这就是为什么我可以在这种情况下使用管道，您需要传递 usersList &allUsers 到自定义 @Pipe getUsers(它将作为 Angular1 中的过滤器).

Thats why I could use pipe for this case, where you need to pass usersList & allUsers to custom @Pipe getUsers (it will act same as a filter in Angular1).

标记

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

演示 Plunkr

这篇关于你如何在 Angular2 中对 NgFor 的结果运行一个函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！