如何在Angular2中对NgFor的结果运行函数？

Dennis Smolek 发表于 Dev

丹尼斯·斯莫瑞克

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

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

  }

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

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

因此，您有一个很好的简单函数来获取用户ID并查找其余的用户详细信息：

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

然后在模板中使用* ngFor遍历列表中的用户，但是您想查找全部详细信息

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

不起作用...没有创建自定义组件或其他更复杂的内容，我无法弄清楚如何为每个用户运行一次getUser函数。我当然可以一遍又一遍地运行它，例如：

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

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

这是到目前为止我一直在玩的东西

Pankaj Parkar

尽管您可以在ngFor模板指令上创建一个变量，但是该变量只能采用index的值，即偶数，奇数和倒数。

这就是为什么我可以在这种情况下使用管道的原因，在这种情况下，您需要将usersList＆传递allUsers给自定义@PipegetUsers（它与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;
  }
}