如何在应用了管道的 ngfor 中获取对列表的引用答案

【问题标题】：How to get a reference to the list in an ngfor with a pipe applied to it如何在应用了管道的 ngfor 中获取对列表的引用
【发布时间】：2026-02-12 10:25:01
【问题描述】：

我正在将过滤器应用于 ngfor 内的列表，就像 *ngFor="data | pipe" 我想要访问从我的 ts 组件类中的过滤器输出的对象。我尝试使用这个：*ngFor="data | pipe as filtereddata"，但我认为这只适用于标签，并且似乎不适用于组件上的对象。有没有办法访问这些过滤后的数据？

作为参考，管道进行了排序和过滤，我希望能够选择列表中的第一项，并且如果已经完成，我不想再使用 ts 中的数据。

【问题讨论】：

只是评论说你不应该在有角度的管道中进行排序或过滤。管道在每个更改检测周期中运行，无论是否有任何更改。这意味着潜在的繁重排序和过滤操作会在每个更改检测周期运行，这会导致应用程序性能非常差。最好的做法是在你的 ts 组件类中构建何时对自己进行排序和过滤的逻辑，而不是依赖更改检测来为你做这件事，它还有解决你问题的副作用。
我没有使用不纯的管道，所以它应该只在需要时运行，所以我不明白为什么你说的是真的
如果没有不纯的管道，你是如何排序或过滤的，
只有当您在每次列表更改时始终更改对象引用并且您的排序/过滤参数是原语时，这才有效。或者如果列表没有改变。 Option1 对我来说没有任何意义，因为在需要时在组件中应用排序/过滤器似乎更容易，如果其他人曾经在这个应用程序上工作过，或者如果你在团队环境中这样做，没有人会理解为什么.选项2，同样的情况。这有点观点，但您不必了解管道的内部工作原理即可使用它。
好吧，我建议您将排序和过滤保留在 .ts 中，而不是通过 Pipe。然后你可以参考你的排序/过滤列表，甚至比使用管道更容易消除过滤器

标签： angular

【解决方案1】：

我建议将您的排序逻辑放在 ts 中带有 getter 的属性中。比如：

get sortedData(): any[] {
    return ...your sorting logic...
}

比通过这个 sortedData 属性执行 ngFor。

注意：getter 的返回类型可能是您的特定类型（例如 YourType[] ）

希望对你有帮助

【讨论】：

这不是一个好主意，因为将数据绑定到函数会导致该函数继续运行以检查数据是否未更改

【解决方案2】：

import { TestPipe } from 'ts file location'

@Component({
selector:'YourComponent',
templateURl:'Component Html Path'
})
export class ComponentClassName implements OnInit{
private formattedData: any;
constructor(private pipe: TestPipe, private service:yourService){}
ngOnInit(){
//Service call to fetch data
this.service.getData().subscribe((data) =>{

    this.formattedData = this.pipe.transform(data); // use formattedData to bind in HTML

})
}
}

formattedData 将在您的组件文件中引用。您可以在单独的函数中应用转换并在每次数组更改时调用它

【讨论】：

这是我正在做的，但我宁愿在html中使用管道，这样我就不必手动更改数据了