离子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中。现在，我可以创建一项服务来访问此数据。（Services 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>

我有一个函数可以像在moddata.data的ngfor循环一样过滤数据。那么如何将过滤器应用于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分配再次尝试逻辑吗？

Answer 2

您正在设置modData中的提供商对象而不是JSON值。我建议您在组件中订阅getPeople()，以确保您在收到数据时获取数据，由于调用的异步性质。更改类似的方法：

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

在您的组件构造函数中：

peopleService.getPeople().subscribe(data=>{
  this.modData=data;
},error=>{
  console.log(error);
});