javascript - Ionic 2过滤本地json文件

Question

我有一个本地 json 文件，用于使用 Ionic 2 构建的小型信息应用程序。json 数据如下所示:

[
 {name: 'John', type: 'admin', gender: 'male', rate: 0},
 {name: 'Peter', type: 'sales', gender: 'male', rate: 1},
 {name: 'Mary', type: 'admin', gender: 'female', rate: 1},
 {name: 'Paula', type: 'tech', gender: 'female',, rate: 0}
 ]

该文件位于 www\assets\data\people.json。现在我可以创建一个服务来访问这些数据，如下所示。 (服务\people.ts)

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class PeopleService {
  private http: any;
  public data: any;

  constructor(http: Http) {
      this.http = http;
  }

  getPeople() {
     this.http.get("assets/data/people.json")
         .subscribe(res => {
             this.data = res.json();
             console.log(this.data);
         }, error => {
             console.log(error);
         });
  }
 }

现在，如果我想获取此数据并应用过滤器，我在 people.ts 中有以下内容

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PeopleService } from '../../services/people';
import { PersonDetailPage } from '../person-detail/person-detail';

@Component({
  selector: 'page-people',
  templateUrl: 'people.html'
})
  export class PeoplePage {
  people: any;
  modData: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public peopleService: PeopleService) {

    this.selectedItem = navParams.get('item');

    this.people = peopleService;
    this.people.getPeople();

    this.modData = this.people;
    console.log(this.modData);


  }

   resetData() {
      this.modData = this.people;
  }

filterData() {
    this.modData = this.modData.filter((item) => {
        return item.name == 'Mary';
    });

}

type = this.navParams.get('type');


itemTapped(event, item) {

    this.navCtrl.push(PersonDetailPage, {
        item: item
    });
}

 ionViewDidLoad() {
    console.log('ionViewDidLoad PeoplePage');

}

}

最后，为了查看数据，我有以下模板:

<ion-header>

 <ion-navbar>
  <ion-buttons start>
      <button ion-button icon-only (click)="resetData()"><ion-icon name="refresh"></ion-icon></button>
  </ion-buttons>
  <ion-buttons end>
      <button ion-button icon-only (click)="filterData()"><ion-icon name="funnel"></ion-icon></button>
  </ion-buttons>
 <ion-title>People</ion-title>
  </ion-navbar>

 </ion-header>


<ion-content padding>
<ion-card>
    <ion-card-header>
        <h2>{{ type }}</h2>
    </ion-card-header>
    <ion-list *ngFor="let item of modData.data" (click)="itemTapped($event, item)">

        <ion-item>
            {{item.name}} {{item.type}}

            <ion-icon *ngIf="item.rate == 1" item-right name="star" class="custom-icon"></ion-icon><br />{{item.type}}
        </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

我有一个函数来过滤数据，如下所示(请注意，ngFor循环遍历modData.data)。那么如何应用 modData 的过滤器呢？

filterData() {
    this.modData = this.modData.filter((item) => {
        return item.name == 'Mary';
    });

因此，如果单击 filterData 函数，数据应该只显示 Mary 的名字。但由于以下错误，filterData 失败了

 caused by: this.modData.filter is not a function

我猜是因为 modData 是一个对象？

那么如何从 PeopleService 获取数据并对其进行过滤呢？当然，我希望它实际上最终成为标题中的搜索框。

非常感谢任何想法。

Answer 1

您应该将 this.modData 设置为

 this.modData = this.people.data;

与 PeopleService 一样，加载的 json 数据会分配给 this.data，而不是直接分配给服务实例。

您可以通过更改上面提到的 this.modData 赋值来再次尝试您的逻辑吗？