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而不是服务实例。

您是否可以通过更改上述{{1}}作业再次尝试您的逻辑？

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); });

Ionic 2过滤本地json文件

2 个答案: