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

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'];

所以你有一个很好的简单函数来获取用户 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 变量并将其设置为局部变量？

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

Answer 1

虽然你可以在 ngFor 模板指令上创建一个变量，但该变量只能取索引、偶数、奇数和最后一个的值。

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

Demo Plunkr

Answer 2

我喜欢

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

这就是我要用的。这比创建一个 pipe/filter.

要容易得多

即使您可以使用本地模板变量做一些事情，我相信它会针对列表中的每个项目、每个更改检测周期进行重新评估，就像上面显示的 HTML 一样。

另请参阅，其中一项建议是创建一个子组件，然后将 getUser(userId) 传递给该组件上的输入属性。

Answer 3

您可以使用如下标记

<tr *ngFor="theUser in getTheUsers(usersList)" >
   <td>{{theUser.name}}</td>
</tr>

getTheUsers() 函数应该是这样的

getTheUsers(usersList:string[]){
  return usersList.map(user=> this.allUsers[user]); 
}

Answer 4

另见，它使用 ng-container，*ngIf 和 let。虽然不理想，但您不需要创建子组件。基本上 *ngIf 的表达式创建了一个对象（所以 *ngIf 总是真实的，因此总是呈现内容）并且对象上的属性包含计算值。该对象被分配给局部变量（使用 *ngIf 的 let 语法）。

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

How do you run a function on the result of NgFor in Angular2?

typescript

angular2-template

angular

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

How do you run a function on the result of NgFor in Angular2?

typescript

angular2-template

angular

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