考虑系统中所有用户的列表:
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变量并将其设置为局部变量?
答案 0 :(得分:4)
虽然你可以在ngFor template指令上创建一个变量,但是那个变量只能取值index,even,odd&amp;持续。
这就是为什么我可以在这种情况下使用管道,你需要通过usersList
&amp; 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;
}
}
答案 1 :(得分:2)
我喜欢
<td>{{getUser(userId).name}}</td>
这就是我要用的东西。它比创建一个管道/过滤器容易得多。
即使您可以使用本地模板变量执行某些操作,我相信它会针对列表中的每个项目,每个更改检测周期进行重新评估,就像上面显示的HTML一样。
另请参阅ng2: How to create variable in ngFor loop,其中一个建议是创建子组件,并将getUser(userId)
传递给该组件的输入属性。
答案 2 :(得分:0)
您可以按照以下步骤进行标记
<tr *ngFor="theUser in getTheUsers(usersList)" >
<td>{{theUser.name}}</td>
</tr>
getTheUsers()
函数应该是这样的
getTheUsers(usersList:string[]){
return usersList.map(user=> this.allUsers[user]);
}
答案 3 :(得分:0)
另见使用 ng-container 的 IconTabFilter
,*ngIf 和 let。虽然不理想,但您不需要创建子组件。基本上, *ngIf 的表达式创建了一个对象(因此 *ngIf 始终是完整的,因此始终呈现内容)并且对象上的属性包含计算值。对象被分配给局部变量(使用 *ngIf 的 let 语法)。