我需要在Angular中编写一个自定义管道,它接受一个对象数组和一个名为order
的变量,该变量的值为ascending
或descending
作为参数,然后按属性值对对象数组进行排序。
数据看起来像这样:
[
{
"location_type": "KAUPPA",
"postalcode": "100",
"availability": "LIIKETILAN AUKIOLO",
"location": "SUOMALAINEN KIRJAKAUPPA / SISÄKÄYTÄVÄ",
"municipality": "TURKU",
"target_address": "ALEKSANTERINKATU 23",
"availability_details": "",
"coordinates_lon": "24.941095",
"coordinates_lat": "60.168718"
},
{
"location_type": "PANKIN KONTTORI",
"postalcode": "100",
"availability": "ITSEPALVELUALUEEN AUKIOLO",
"location": "NORDEA SENAATINTORI",
"municipality": "VANTAA",
"target_address": "ALEKSANTERINKATU 30",
"availability_details": "ma-su klo 06-22",
"coordinates_lon": "24.950720",
"coordinates_lat": "60.168930"
},
{
"location_type": "TAVARATALO",
"postalcode": "100",
"availability": "LIIKETILAN AUKIOLO",
"location": "STOCKMANN / 8. KERROS",
"municipality": "HELSINKI",
"target_address": "ALEKSANTERINKATU 52",
"availability_details": "",
"coordinates_lon": "24.941870",
"coordinates_lat": "60.168430"
}
]
数组中的对象需要按照municipality
的值进行排序。
3条答案
按热度按时间qgelzfjb1#
正如在评论中多次提到的,以及Pardeep的上述答案,使用
Pipe
对数据进行排序不是一个很好的主意。如果您想对字段进行排序,只需在模板上实现它,然后仅在事件上触发排序函数。这将大大保存您的性能。
在这里,给予这个一个尝试:
在模板中:
这里有一个Working Sample StackBlitz给你的参考。
nle07wnf2#
官方文档-过滤,尤其是排序是昂贵的操作。
Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移动到组件本身。
一般来说,这种情况下不需要使用自定义管道,而是可以直接将数据排序到组件类中。但是如果你想使用
pipe
,请参考下面的内容-Working example
von4xj4u3#
使用ramda的类型安全解决方案: