带有自定义管道的Angular 7 keyvalue管道，用于过滤掉值的数据

Question

在我的angular 7应用程序中，我使用keyvalue过滤器来获取键和值。在这里，我需要过滤用户给出的值。我已经创建了自定义管道并将示例发送给我从API收到的响应，但它不起作用。

有人帮我这样做吗？

JSON从服务器获取它

addedAirport = [[
{
  "2": [
    {
      "airportId": 33,
      "name": "Montreal-Mirabel International Airport",
      "countryId": 2,
      "stateId": 45,
      "city": null
    },
    {
      "airportId": 34,
      "name": "Montreal-Pierre Elliott Trudeau International Airport",
      "countryId": 2,
      "stateId": 45,
      "city": null
    }
  ]
}]]

.html（角度视图）

<div class="airport-row row" *ngFor="let country of addedAirport[0]  | keyvalue | searchFilterAirportBy: ['name']: searchAirport;  let in = index; ">
   {{country.key}} // Here I called one more function to take name of the country
 <div class="selection-row airport-selection row" *ngFor="let airport of country.value;  let inAirport = index; ">
   {{airport.name}}
 </div>
</div>

管

transform(list: any, prop: string, substring: string) {
    // console.log(list);
    if (substring.length > 0) {
        const newList: any = [{
            '2': [
            {
                'airportId': 33, 
                'name': 'Montreal-Mirabel International Airport', 
                'countryId': 2,
                'stateId': 45,
                'city': null
            },
            {
                'airportId': 34,
                'name': 'Montreal-Pierre Elliott Trudeau International Airport',
                'countryId': 2,
                'stateId': 45,
                'city': null
            }
        ]
        }];

return newList; ......

注意：Normaly，我可以看到数据为{“key”：“2”，“value”：...}。但是，在我从Pipe发出之后，它正常显示为{“2”：[{“airportId”：33，“name”：“...}

任何人都帮助我如何将数据作为密钥和值从管道传递？

Answer 1

由于过滤器将返回与服务响应（即地图数组）相同形状的数据，因此最好首先应用过滤器，然后使用keyvalue将每个地图对象转换为其国家/地区数组。

<ng-container
        *ngFor="let mapObj of addedAirport[0] | searchFilterAirportBy: ['name']: searchAirport">
    <div class="airport-row row"
         *ngFor="let country of mapObj | keyvalue ; let in = index; ">
        {{country.key}}
        <div class="selection-row airport-selection row"
             *ngFor="let airport of country.value;  let inAirport = index; ">
            {{airport.name}}
        </div>
    </div>
</ng-container>

但请注意，由于性能问题，在ngFor上应用过滤器或排序是not recommended。