如何使用scriptionic-v2打字稿中的搜索栏搜索导航中元素的标题 [英] How to search title of the elements in navigation using searchbar in scriptionic-v2 typescript

问题描述

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

I want to search the title of the elements in the navigation using the searchbar.

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

I want to add a search function in the following code.

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 });
  }

}

推荐答案

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打字稿中的搜索栏搜索导航中元素的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！