Question

再次感谢朋友@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好

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
}

SearchBar Ionic 2

1 个答案: