Угловой 7-канальный канал с пользовательским каналом для фильтрации данных значения - PullRequest
Новая
       32

Угловой 7-канальный канал с пользовательским каналом для фильтрации данных значения

0 голосов
/ 03 марта 2019

В моем приложении 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>

ТРУБА 

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;......

Примечание. Обычно данные отображаются как {"ключ": "2", "значение": ...}.Но после того, как я отправил из Pipe, он показывает как {2 ": [{" airportId ": 33," name ":" ...}

Кто-нибудь, помогите мне, как пройтиданные как ключ и значение из трубы?

1 Ответ

0 голосов
/ 03 марта 2019

Поскольку фильтр будет возвращать данные в той же форме, что и ответ службы (т. Е. Массив карт), лучше сначала применить фильтр, а затем преобразовать каждый объект карты в массив его страны, используя 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 из-за проблем с производительностью.

...