Question

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

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

Answer 1

我建议将你的排序逻辑放在一个带有getter的属性中。类似的东西：

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

通过此sortedData属性执行ngFor。

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

我希望这会对你有所帮助

Answer 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将在组件文件中引用。您可以在单独的函数中应用转换，并在每次更改数组时调用它

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

2 个答案: