Question

我目前正在创建一个简单的应用，其中包含从本地文件导入的模拟JSON数据。我希望能够根据navParams列出具有特定类别的项目。

我已经创建了一个API服务来检索数据并且工作正常。这是数据的摘录：

 [
  {
    "id": 0,
    "category": "Fantasticness",
    "title": "Awesome Title",
    "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
    "imgpath": "assets/img/backgrounds/img1.png"
  },
  {
    "id": 1,
    "category": "Fantasticness",
    "title": "Cool Title",
    "description": "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
    "imgpath": "assets/img/backgrounds/img2.png"
  }
]

这是我的服务，其中getFilteredItems是我想修复的，因为它可以采用类别参数：

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

@Injectable()
export class ItemApi {

constructor(private http: Http) {}

getItems(){
return new Promise(resolve => {
    this.http.get('assets/data.json')
      .subscribe(res => resolve(res.json()));
    });
  }

  getFilteredItems(term: string){

      // Parameters
      let params = new URLSearchParams();
      params.set('search', term); // the passed parameter: term

     // Get request with search parameters
     return new Promise(resolve => {
         this.http.get('assets/data.json', { search: params })
          .subscribe(res => resolve(res.json()));
     });

  }


}

在我的控制器中，我正在调用API并尝试使用navParams传递数据。我已经使用this.category记录了类别，它可以正常工作，因为它显示了传递的数据。但是，当我尝试使用类别参数调用我的服务时，它无法正常工作。

这是我的类别列表控制器：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';

// Import pages to allow links to the page
import { SingleItem } from '../../pages/single-item/single-item';

// Service import for items
import { ItemApi } from '../../services/service';

// The component imports the specific parts from the html and scss file.
// The Http provider is included to make the API call to the service.
@Component({
  selector: 'page-category',
  templateUrl: 'category.html',
  providers: [Http]
})

export class CategoryPage {

  // The items array to populate with data is created
  category: any;
  items: any;
  modifiedData: any;
  categoryFilter: any;

  constructor(
              public navCtrl: NavController,
              private navParams:NavParams,
              private itemApi: ItemApi
            )
            {
              this.category = this.navParams.data;
              console.log(this.category);
            }

  // ------------------------------------------------------------------------------------------
  // FUNCTIONS
  // ------------------------------------------------------------------------------------------

  // This is where the data loads from the service.
  // It happens when the view loads for the first time.
  ionViewDidLoad() {

    // Get the JSON data from our itemApi
    this.itemApi.getFilteredItems(this.category).then(data => this.items = data);
    console.log(this.items);
  }

  // This function filters the array to only include items in the specified category
  filterData() {
    this.items = this.items.filter(item => item.category == 'Fantasticness')
  }

  // This function is an event to listen to clicks on elements.
  // The SingleItem Page has been included to be passed in this function.
  itemTapped($event, item) {
    this.navCtrl.push(SingleItem, item);
  }


}

filterData函数有效但在此我已经硬编码了类别。我希望能够使用navParams传递它并调用getFilteredItems服务。但是，它不起作用。你知道如何解决它吗？

如何使用Angular 4中的类别参数为Ionic 2应用程序查询JSON数据？

0 个答案: