在Angular 6中按嵌套值过滤HTTP JSON响应答案

【问题标题】：Filter HTTP JSON response by nested value in Angular 6在Angular 6中按嵌套值过滤HTTP JSON响应
【发布时间】：2019-02-12 17:47:09
【问题描述】：

我想从外部源获取一些 JSON 数据，并在我的视图中将其显示在 <select>- 和 <option>-Tag 中。到目前为止一切顺利。

某些 JSON 条目具有 private: false 值。这就是我的问题所在。我的目标是它，只向用户显示包含设置为 false 的 private 值的条目。

我已经查找了 JSON 过滤器，发现可以在 ngFor (let appointmentType of appointmentTypes | filter: { private: false }) 的视图中设置过滤器，但我收到一条错误消息，告诉我 The pipe 'filter' could not be found。

这是我从以下网址获得解决方案的网址： ng-repeat :filter by single field

这是 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 响应条目，但我只想提供 private 设置为 false 的条目。

【问题讨论】：

您一直在阅读 AngularJS (1.x) 文档，即不与 Angular (2+) 兼容：angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

标签： javascript json angular http filter

【解决方案1】：

angularjs 中的过滤器与 angular 中的管道不同。您需要实现自己的自定义管道以使您的逻辑正常工作。

你的管道应该是这样的，

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

【讨论】：

非常感谢。这就像一个魅力！ :) 这不是我的反对意见。我的问题也与您的回答同时被否决。无论如何，我赞成并将其标记为解决方案。

【解决方案2】：

您将不得不创建自己的自定义管道来过滤用户列表。

Angular 不提供用于过滤或排序列表的管道。熟悉 AngularJS 的开发人员将它们称为 filter 和 orderBy。 Angular 中没有等价物。

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

之所以做出此决定，是因为他允许这些类型的原生管道对性能产生影响。

我在这里整理了一个堆栈闪电战的解决方案：https://stackblitz.com/edit/angular-pqeky2

如您所见，第三个拥有privacy: false 的用户没有出现在选择列表中，因为它被自定义管道过滤掉了。

【讨论】：