搜索吧离子 2.

Question

再次感谢朋友@amin，走吧，我在州这样做.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 和名称的状态对象，并且

我有一个服务提供商，我可以在那里获取数据，看看 城市组件.ts 好的

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状态传递给城市中的id_state的问题？我这样做是在我的 api 中或在这里传递id_state，如果我在这里这样做，在哪里做 id_state = id 并显示与州相关的城市？

Answer 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
}