Question

在我的angular 7应用程序中，我使用键值过滤器获取键和值。在这里，我需要过滤用户提供的值。我已经创建了自定义管道，并向示例发送了与从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>

PIPE

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
            }
        ]
        }];

返回newList; ......

注意：通常，我可以看到数据为{“ 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。

带有自定义管道的Angular 7键值管道可过滤出值的数据

1 个答案: