按特定值2筛选JSON

我是离子2和Angular的新手，我尝试过滤Json以仅显示特定值；示例：按性别仅获取用户。这是我的密码

home.html

<ion-list>
    <ion-item *ngFor="let item of items | filter: {item.gender:'female'}" (click)="itemClicked($event,item)">
      <ion-avatar item-left>
        <img src="{{item.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{item.name.first | uppercase }}</h2>
      <h3>{{item.name.last | uppercase }}</h2>
      <p>{{item.gender}}</p>
      <button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>
    </ion-item>
  </ion-list>

但我的想法行不通

---

有什么办法帮我吗`/

您可以在组件代码中而不是在视图中执行此操作

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    public items: any;

    constructor(public navCtrl: NavController, public http: Http) {
        // this.http = http; <- You don't need this, this.http is already available because by declaring it in the constructor, now a public property is created in the component
        this.http.get("http://api.randomuser.me/?results=10")
            .map(data => data.json().results) // Instead of getting the _body manually, you can use the map method from RxJS
            .subscribe(data =>{
                //console.log(data);
                this.items = data.filter(item => item.gender === 'female');
             },error=>{
                 console.log(error);// Error getting the data
             });
     }


     // ...

}

从'@angular/core'导入{Component}；
从'@angular/Http'导入{Http}；
从'ionic angular'导入{NavController}；
导入“rxjs/add/operator/toPromise”；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
公共物品：任何；
构造函数（公共navCtrl:NavController，公共http:http）{
//this.http=http；
filter:'female'
试试这个..嗨！我有一个新问题脚本过滤JSON，现在需要按“title”排序结果列表首先在列表中显示所有用户“Nat”：“US”在我尝试使用管道的所有项目之后出现错误“找不到模块”但是我的模块在app.modules.ts和list.ts中声明了。谢谢你节省了我的时间！很高兴听到@EbruGüngör:）
import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

    public items: any;

    constructor(public navCtrl: NavController, public http: Http) {
        // this.http = http; <- You don't need this, this.http is already available because by declaring it in the constructor, now a public property is created in the component
        this.http.get("http://api.randomuser.me/?results=10")
            .map(data => data.json().results) // Instead of getting the _body manually, you can use the map method from RxJS
            .subscribe(data =>{
                //console.log(data);
                this.items = data.filter(item => item.gender === 'female');
             },error=>{
                 console.log(error);// Error getting the data
             });
     }


     // ...

}

  <ion-list>
    <ion-item *ngFor="let item of items" (click)="itemClicked($event,item)">
      <ion-avatar item-left>
        <img src="{{ item.picture.thumbnail }}">
      </ion-avatar>
      <h2>{{ item.name.first | uppercase }}</h2>
      <h3>{{ item.name.last | uppercase }}</h2>
      <p>{{ item.gender }}</p>
      <button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>
    </ion-item>
  </ion-list>