离子中的搜索栏“无法读取属性srcElement undefined”

Question

initializeItems()

 {

    this.items = this.productos;

 }

getItems(searchbar)

 {

    this.initializeItems();

    // set q to the value of the searchbar

 var q = searchbar.srcElement.value;

    // if the value is an empty string don't filter the items

 if (!q) {

      return;

    }

    this.productos = this.productos.filter((v) => 

{

 if(v.name && q) 

{
        if (v.name.toLowerCase().indexOf(q.toLowerCase()) > -1) {

        return true;

 }

        return false;

      }

 });

    console.log(q, this.productos.length);

  }

这是搜索栏的代码，但是当我在搜索输入中输入内容时，我收到错误，因为无法读取属性srcElement undefined。

Answer 1

这是ionic official docs中提到的搜索栏的基本用法，您可以使用它来实现搜索功能。

你的HTML中的

：

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  </ion-item>
</ion-list>

每次输入更改时都会触发getItems（）函数

在你的ts中

：

constructor() {
  this.initializeItems();
}

initializeItems(){
  this.items = this.products;
}

getItems(ev: any) {
  this.initializeItems();
  let val = ev.target.value;

  if (val && val.trim() != '') {
    this.items = this.items.filter((item) => {
      return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
    })
  }
}

Answer 2

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Config } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { AlertController } from 'ionic-angular';
import { AddassetPage } from '../addasset/addasset';
import { HttpModule } from '@angular/http';
import { ServiceProvider } from '../../providers/service/service';
import { LogoutPage } from '../../pages/logout/logout';
import { DeletePage } from '../../pages/delete/delete';
declare var i;


@IonicPage()
@Component({
  selector: 'page-asset',
  templateUrl: 'asset.html',
})
export class AssetPage {
  productos: any[];
  productlist: any[];
  viewMode: string = "list";
  map;
  items: any;

  task: any[];
  markersGroup;
  searchTerm: String = '';

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public config: Config, public navParams: NavParams, public service: ServiceProvider) {
    this.getData();
    this.service.loadAll().then(result => {

    });
    this.initializeItems();
  }
  getData() {
    this.service.getDataServer().subscribe(
      (data: any) =>  this.productos = data ,
      (err: any) => console.log(err)
    );
  }
  detailsPage(id, name, asset_tag, purchase_date, purchase_cost, model_id, serial, warranty_months, next_audit_date, created_at, updated_at) {
    console.log(id, name, asset_tag, purchase_date, purchase_cost, model_id, serial, warranty_months, next_audit_date, created_at, updated_at);
    this.navCtrl.push(LogoutPage, { id: id, name: name, asset_tag: asset_tag, purchase_date: purchase_date, purchase_cost: purchase_cost, model_id: model_id, serial: serial, warranty_months: warranty_months, next_audit_date: next_audit_date, created_at: created_at, updated_at: updated_at });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad AssetPage');
  }
  add() {
    this.navCtrl.push(AddassetPage);
  }
  EditProduct(req) {

    let prompt = this.alertCtrl.create
      ({
        title: 'Edit Asset',
        inputs: [
          {
            name: 'name',
            placeholder: 'name',
            value: req.name,

          },
        ],

        buttons: [
          {
            text: 'cancel',
            handler: data => { }
          },
          {
            text: 'save',
            handler: data => {
              let params: any =
                {
                  id: req.id,
                  name: data.name,
                  price: data.price

                }
              this.service.edit(params)
                .subscribe(
                data => {
                  console.log(data.message);
                  this.getData();
                  this.showAlert(data.message);
                },
                err => console.log(err)
                );
            }
          }
        ]
      })
    prompt.present();
  }
  showAlert(men) {
    let alert = this.alertCtrl.create(
      {
        title: 'information',
        subTitle: men,
        buttons: ['ok']
      });
    alert.present();
  }

  removeItem(productos) {

    this.navCtrl.push(DeletePage);


  }
  delete(productos) {
    this.service.deleteTask(productos).subscribe(
      (data: any) => {
        if (data.affectedRows == 1) {
          this.items.splice(this.items.indexOf(productos), 1);
          (err: any) => {
            (err: any) => console.log(err)
          }
        }
      }

    );

  }

  //searchbar


  initializeItems() {
    this.items = this.productos;
  }
  getItems(ev:any) {
    this.initializeItems();
    let val = ev.target.value;

    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
}
}

Answer 3

<ion-content padding>            

                      

      ID：{{producto.id}}

  <ion-note item-right color="dark">Name:{{producto.name}}</ion-note>

</button>
  <ion-item-options>
  <button ion-button icon-only (click)="  delete(productos)"><ion-icon name="trash"></ion-icon>Delete</button>

  </ion-item-options>
</ion-item-sliding>