带有自定义参数的 ngFor trackBy 函数
ngFor trackBy function with custom parameters
trackBy 函数(例如在 ngFor 中)提供两个参数:index 和 item(来自被迭代的集合)。有没有办法将附加信息(作为参数?)传递给 trackBy 函数?
我的情况是,我可能会为我的组件(包含 ngFor)的每个实例迭代各种类型,具有不同的标识字段名称。理想情况下,我希望能够传递第三个参数,指示应读取项目中的哪个字段。
bind
方法可以帮你做到这一点
template.html
<div *ngFor="let item of items; trackBy: trackByFn.bind(this, 'name')">
{{ item }}
</div>
component.ts
items = [
{
id: 1,
name: 'name1'
},
{
id: 2,
name: 'name2'
}
]
trackByFn(customParam, index, item) {
return item[customParam];
}
我知道这个问题已经有一年多了,但我想添加另一个选项:
您可以创建一个 Angular 管道,将附加参数作为自变量和 returns TrackByFunction。这种管道的使用如下所示:
<div *ngFor="let item of items; trackBy: (myParameter | myTrackByFn)">
管道代码如下所示:
@Pipe({ name: 'myTrackByFn' })
export class MyTrackByFnPipe implements PipeTransform {
transform<T>(myParameter: any): TrackByFunction<T> {
return (index: number: item: T) => {
// ...
};
}
}
这种方法带来的好处之一是您可以跨组件重用管道,无需在每个组件中重新实现 trackBy 函数。
您可以在 Ben Nadel's post 中阅读有关此方法的更多信息。
trackBy 函数(例如在 ngFor 中)提供两个参数:index 和 item(来自被迭代的集合)。有没有办法将附加信息(作为参数?)传递给 trackBy 函数?
我的情况是,我可能会为我的组件(包含 ngFor)的每个实例迭代各种类型,具有不同的标识字段名称。理想情况下,我希望能够传递第三个参数,指示应读取项目中的哪个字段。
bind
方法可以帮你做到这一点
template.html
<div *ngFor="let item of items; trackBy: trackByFn.bind(this, 'name')">
{{ item }}
</div>
component.ts
items = [
{
id: 1,
name: 'name1'
},
{
id: 2,
name: 'name2'
}
]
trackByFn(customParam, index, item) {
return item[customParam];
}
我知道这个问题已经有一年多了,但我想添加另一个选项:
您可以创建一个 Angular 管道,将附加参数作为自变量和 returns TrackByFunction。这种管道的使用如下所示:
<div *ngFor="let item of items; trackBy: (myParameter | myTrackByFn)">
管道代码如下所示:
@Pipe({ name: 'myTrackByFn' })
export class MyTrackByFnPipe implements PipeTransform {
transform<T>(myParameter: any): TrackByFunction<T> {
return (index: number: item: T) => {
// ...
};
}
}
这种方法带来的好处之一是您可以跨组件重用管道,无需在每个组件中重新实现 trackBy 函数。
您可以在 Ben Nadel's post 中阅读有关此方法的更多信息。