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。

这是我从以下地址获得解决方案的网址： 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/`);
}

正如我所说，我管理过它确实在select选项中显示了JSON Response条目，但是我只想提供private设置为false的条目。

Answer 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

Answer 2

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

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

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

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

我在这里将堆叠闪电与解决方案放在一起：https://stackblitz.com/edit/angular-pqeky2

您会看到第三个具有隐私权的用户：false不会出现在选择列表中，因为它已被自定义管道过滤掉。

通过Angular 6中的嵌套值过滤HTTP JSON响应

2 个答案: