搜索栏离子 2答案

【问题标题】：SearchBar Ionic 2搜索栏离子 2
【发布时间】：2017-02-08 14:09:12
【问题描述】：

再次感谢朋友@amin，走吧，我在 States.html 中执行此操作：

<ion-col col-6 col-sm-9 col-md-6 col-lg-4 col-xl-3 id="states" *ngFor="let state of states">
   <a (click)="navigateTo(state)">
    <h5><strong>States</strong></h5>
    <h4><strong>{{ states.name }}</strong></h4>
  </a>
</ion-col>

在这个列表中，我在 states.ts 中得到了一个对象状态 ok！

navigateTo(state) {
  this.navCtrl.push(CityComponent, {
  state: state
});

}

在这里，我得到了带有 id 和 name 的状态对象

我有一个服务提供商，我从那里获取数据，看看 CitiesComponents.ts ok

export class CitiesComponent {  
  state: any;
  searchQuery: string = '';
  cities: any[];

  constructor(public navParams: NavParams, public navCtrl: NavController, public service: ServiceProvider) {
    this.state = navParams.get('state');
    this.initializeCities();
  }

  initializeCities() {
    this.service.getCities()
      .subscribe(
        data => this.cities = data,
        err => console.log(err)
      );
  }

  getNameCities(eve: any) {
    this.initializeCities();
    let val = eve.target.value;
    if(val && val.trim() != '') {
      this.cities = this.cities.filter((city: any) => {
        if (city.name.toLowerCase().indexOf(val.toLowerCase()) > -1)
        return true;
          else
            return false;
      })
    }
  }
}

在这里，我从服务提供商那里获取数据并显示在我的 html 中，但这是如何将 id state 传递给 city 的 id_state 的问题？我这样做是在我的 api 中或在这里传递 id_state，如果我在这里这样做，在哪里做 id_state = id 并显示与各州相关的城市？

【问题讨论】：

您需要在第一页通过搜索找到州，然后在第二页搜索所选州的城市？
是的！城市必须与所选州有关，如何制作？

标签： json angular ionic2

【解决方案1】：

在第一页你需要

html 文件：

<ion-searchbar [(ngModel)]="search" placeholder="search" (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
    <ion-list-header>
        header
    </ion-list-header>
    <button ion-item *ngFor="let state of states" (click)="itemTapped($event, state)">
        <h2>{{state.name}}</h2>
    </button>
</ion-list>

ts 文件：

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

//component
import { CityPage } from '../city/city';

@Component({
   selector: 'message-list',
   templateUrl: 'message-list.html',
   providers: [MessageService]
})
export class StatePage {

constructor(
   public navController: NavController,
   public navParams: NavParams
) {}

states;
search;

ionViewWillEnter() {
   //get the states
   this.states = states;
}

getItems() {
   //search the state with this.search
   this.states = searched_states;
}

itemTapped(event, statet) {
   this.navController.push(CityPage, {
      state: state
   });
}
}

在第二页 html 就像第一页，但你可以像这样获得选中状态：

ngOnInit() {
   this.selected_state= this.navParams.get('state');
   //then loade the cities with selected state
}

【讨论】：