Фильтровать HTTP-ответ JSON по вложенному значению в Angular 6

Question

Я хочу получить некоторые данные JSON из внешнего источника и отобразить их в виде <select> - & <option> -Tag на мой взгляд. Пока все хорошо.

Некоторые записи JSON имеют значение private: false. И вот тут-то и возникает мой вопрос. Мое предназначение - показывать пользователю только записи, содержащие значение private, установленное в false.

Я уже искал фильтр JSON и обнаружил, что могу установить фильтр в своем представлении в ngFor (let appointmentType of appointmentTypes | filter: { private: false }), но я получаю сообщение об ошибке, сообщающее, что The pipe 'filter' could not be found.

Это URL, с которого я получил решение: ng-repeat: фильтр по одному полю

Это ответ JSON:

[
  {
    "id": 5780379,
    "name": "Appointment Type 1",
    "description": "",
    "duration": 15,
    "price": "290.00",
    "category": "REGULAR",
    "color": "#3177CA",
    "private": false
  },
  {
    "id": 5780481,
    "name": "Appointment Type 2",
    "description": "",
    "duration": 15,
    "price": "39.00",
    "category": "SERVICE",
    "color": "#D8394F",
    "private": true
  }
]

Это мой HTML

<select type="appointmentType" [(ngModel)]="appointmentTypeId">
  <option *ngFor="let appointmentType of appointmentTypes | filter: { private: false }" [ngValue]="appointmentType.id">{{appointmentType.name}}</option>
</select>
{{appointmentTypeId}}

Это мой файл Component.TS:

import { Appointment } from './../../appointments/appointment';
import { Component, OnInit } from '@angular/core';
import { APIService } from './../../../api.service';

@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html',
  styleUrls: ['./booking.component.scss']
})
export class BookingComponent implements OnInit {
  private appointmentTypes: Array<object> = [];
  appointmentTypeId: any;

  constructor(private apiService: APIService) {}

  ngOnInit() {
    this.getData();
    console.log(this.appointmentTypeId);
  }

  public getData() {
    this.apiService.getAppointmentTypes().subscribe((data: Array<object>) => {
      this.appointmentTypes = data;
      console.log(data);
    });
  }
}

И не знаю, если это необходимо, , но вот мой api.service.ts:

getAppointmentTypes() {
  return this.httpClient.get(`${this.API_URL}/appointment-types/`);
}

Как я уже сказал, мне удалось показать записи JSON Response в опции выбора, но я хочу предоставить только те, для которых private имеет значение false.

Answer 1

Вам нужно будет создать свой собственный канал для фильтрации списка пользователей.

Angular не предоставляет каналы для фильтрации или сортировки списков. Разработчики, знакомые с AngularJS, знают это как filter и orderBy. В Angular нет эквивалентов.

https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Это решение было принято из-за того, что он унаследовал влияние производительности на использование этих типов собственных каналов.

Я собрал стек-блиц с решением здесь: https://stackblitz.com/edit/angular-pqeky2

Как вы можете видеть третьего пользователя, который имеет конфиденциальность: false не появляется в списке выбора, потому что он отфильтрован по пользовательскому каналу.

Answer 2

Фильтр в angularjs отличается от трубы в angularjs. вам нужно реализовать собственный пользовательский канал, чтобы ваша логика работала.

твоя труба должна быть такой,

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'filter' })
export class filterPipe implements PipeTransform {
  transform(categories: any, searchText: any): any {
     let result = categories.filter(t=>t.private == searchText);
     return result;
  }
}

STACKBLITZ DEMO