Question

我一直在关注ionic2 SearchBar的教程来处理过滤器功能。

问题是，我无法弄清楚如何让onCancel和onClear工作。

步骤： 1）在SearchBar中输入一些关键字。它调用onInput事件并从 searchItem.target.value 获取值，这与仅使用 searchItem.value

的教程不同

2）现在我尝试单击清除“x”或“取消”按钮，它会调用onClear / onCancel事件，紧接着是onInput事件。在此调用过程中，它找不到 searchItem.target.value 并导致未定义，因此会破坏其功能。

任何人都可以提供更深入的详细信息吗？

Answer 1

我通过停止onClear事件传播

在ionic2的教程样本中修复了它

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

    @Component({
        selector: 'my-search',
        template: '<ion-toolbar primary><ion-searchbar (input)="onInput($event)" (ionClear)="onClear($event)"></ion-searchbar></ion-toolbar><ion-content><ion-list><ion-item *ngFor="let item of items">{{ item }}</ion-item></ion-list></ion-content>'
    })
    export class HomePage {

        items = [];

        constructor() {
            this.initializeItems();
        }

        initializeItems() {
            this.items = [
                'Angular 1.x',
                'Angular 2',
                'ReactJS',
                'EmberJS',
                'Meteor',
                'Typescript',
                'Dart',
                'CoffeeScript'
            ];
        }

        onClear(ev)
        {
            this.initializeItems();
            ev.stopPropagation();
        }

        onInput(ev) {
            // Reset items back to all of the items
            this.initializeItems();

            // set val to the value of the searchbar
            var val = ev.target.value;

            // if the value is an empty string don't filter the items
            if (val && val.trim() != '') {
                this.items = this.items.filter((item) => {
                    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
                })
            }
        }
    }

Ionic2 SearchBar混乱，onInput在触发onClear，onCancel后调用

1 个答案: