考虑系统中所有用户的列表:
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 变量并将其设置为局部变量?