Question

我想使用搜索栏搜索导航中元素的标题。

我想在以下代码中添加搜索功能。

import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-emergency',
  templateUrl: 'emergency.html'
})

@Component({
  templateUrl: 'emergency_details.html',
})
export class EmergencyDetailsPage {
  item;

  constructor(params: NavParams) {
    this.item = params.data.item;
  }
}

@Component({
  template: `
<ion-header>
  <ion-navbar>
    <ion-title>응급</ion-title>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)" icon-left>
      <ion-icon [name]="'logo-' + item.icon" [ngStyle]="{'color': item.color}" item-left></ion-icon>
      {{ item.title }}
    </button>
  </ion-list>
</ion-content>
`
})
export class EmergencyPage {
  items;

  constructor(public nav: NavController) {
    this.items = [
      {
        'title': 'Angular',
        'icon': 'angular',
        'description': 'A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.',
        'color': '#E63135'
      },
      {
        'title': 'CSS3',
        'icon': 'css3',
        'description': 'The latest version of cascading stylesheets - the styling language of the web!',
        'color': '#0CA9EA'
      }
    ]
  }

  openNavDetailsPage(item) {
    this.nav.push(EmergencyDetailsPage, { item: item });
  }

}

Answer 1

HTML

<ion-searchbar (ionInput)="getItems($event)" ></ion-searchbar>

          <ion-list >
            <ion-item *ngFor="let item of items  " (click)="openNavDetailsPage(item)">
              {{ item.title }}
            </ion-item>
          </ion-list>

tsfile

openNavDetailsPage(item) {
    this.nav.push(EmergencyDetailsPage, item);
  }

如何使用scriptionic-v2打字稿中的搜索栏搜索导航中元素的标题

1 个答案: