在隐藏键盘之前，离子搜索栏不会搜索

问题描述

我的Ionic应用中有一个搜索栏，我想用来过滤/搜索列表。每当我在后台输入搜索栏时，过滤已经发生，但直到我单击向下箭头隐藏键盘才会在屏幕上显示。让我通过显示以下图片来澄清：

I have a search bar in my Ionic app that I would like to use to filter/search through a list. Whenever I type in the search bar, in the background, the filtering is already happening but it doesn't show on the screen until I click the arrow down to hide the keyboard. Let me clarify by showing the following pictures:

这是我开始搜索之前列表的图片：

This is a picture of the list before I start to search:

这是我试图搜索 abc 的图片。现在，代码背后，搜索已经发生但尚未显示。 （这就是我想要的，我想在每次击键时搜索）

This is a picture of me trying to search for "abc". Now, code behind, the searching has already happened but it has not yet been shown. (which is what I want, I want to search on every keystroke)

仅在点击后从上方图像向下箭头按钮，显示过滤/搜索结果。

Only after clicking the arrow down button from above image, the "filtered/searched" results are shown.

HTML：

<ion-content padding>

    <ion-list>

        <div *ngFor="let period of periodsClone; let j = index">
            <ion-item-divider>{{ period.month | monthNameFormat }} {{ period.year }}
                <div item-end><b>€{{ period.sum |  number : '1.2-2' }}</b></div>
            </ion-item-divider>
            <div *ngFor="let declaration of period.declarations;let i = index;">
                <button ion-item text-wrap detail-none (click)="openDeclaration(period.number,declaration.id);">

                        <ion-icon item-start style="color: grey;" name="time" *ngIf="declaration.status == '1';"></ion-icon>
                        <ion-icon item-start style="color: red;" name="close" *ngIf="declaration.status == '2';"></ion-icon>
                        <ion-icon item-start style="color: lightgreen;" name="checkmark" *ngIf="declaration.status == '3';"></ion-icon>

                        <h2>{{ declaration.name }}</h2>
                        <p>{{ declaration.date | date:'dd-MM-yyyy' }}</p>
                        <p style="color: red;">{{ declaration.comment }}</p>
                        <div item-end>€ {{ declaration.amount | number : '1.2-2'}}</div>
                    <ion-icon name="arrow-forward" item-end></ion-icon>
                </button>
            </div>
            <br>
            <br>
        </div>

    </ion-list>

</ion-content>


<ion-footer>
    <ion-searchbar [(ngModel)]="searchInput" (ionInput)="search($event)">
    </ion-searchbar>
</ion-footer>

打字稿：

search(ev){
    this.periodsClone = this.periods.map(x => JSON.parse(JSON.stringify(x)));

    let value = ev.target.value.toLowerCase();

    for (let i = 0; i < this.periodsClone.length; i++) {
      for (let j = 0; j < this.periodsClone[i].declarations.length; j++) {
        let toRemove = false;
        (this.periodsClone[i].declarations[j].name.toLowerCase().includes(value) || this.periodsClone[i].declarations[j].description.toLowerCase().includes(value) ? toRemove = false : toRemove = true);
        (toRemove ? (this.periodsClone[i].declarations.splice(j,1) , j = 0) : false);
      }
    }

  }

并且：

private periods: Period[] = [];
private periodsClone: Period[] = [];
private searchInput: string;

并且：

  ionViewWillEnter() {
    this.periods = this.declarationService.getPeriods();
    this.periodsClone = this.declarationService.periodsDuplicate;
  }

当我在搜索字段中输入字符时，如何立即搜索？

How do I search immediately when I enter a character in the search field?

PS：这个问题发生在我的Nexus 6上，也发生在我的华为P10上（完全相同）

PS: This problem occurs on my Nexus 6 but also on my Huawei P10 (exactly the same)

编辑：

我仍然坚持这个问题，与此同时我更改了搜索功能的代码：

I am still stuck on this problem, in the meantime I have changed my code for the search function a bit:

search(event) {
    this.periodsClone = this.periods.map(x => JSON.parse(JSON.stringify(x)));
    let value = event.target.value.toLowerCase();

    if (value != '') {

      this.periodsClone = this.periodsClone.filter((period) => {
        return (
          period.declarations.filter((declaration) => {
            return (
              declaration.name.toLowerCase().includes(value) ||
              declaration.description.toLowerCase().includes(value)
            )
          }).length > 0
        )

      })
    }

    console.log(this.periodsClone);
  }

期间：

//Entities
import { Declaration } from './declaration.entity';

export class Period {
    constructor(
        public id: number,
        public status: string,
        public year: number,
        public month: number,
        public sum: number,
        public orderNumber: string,
        public userId: string,
        public submitDate: Date,
        public comment: string,
        public declarations: Declaration[]
    ) { }
}

声明：

//Entities
import { FileCustom } from './file.entity';
import { Period } from './period.entity';
import { Project } from './project.entity';

export class Declaration {
    constructor(
        public id: number,
        public status: string,
        public name: string,
        public description: string,
        public amount: number,
        public date: Date,
        public period: Period,
        public userId: string,
        public files: FileCustom[],
        public comment: string,
        public project: Project
    ) { }

}

现在的问题是我无法重现这个问题，因为有时候我没有得到它，有时我会得到它。我抓住了两个场合：

The problem as of now is that I cannot reproduce the problem, because sometimes I don't get it and sometime's I do get it. I have captured both occasions:

编辑2：

I也尝试使用这样的正常输入：

I also tried to use a normal input for this like this:

<ion-input (keyup)="search($event)" placeholder="Zoeken" clearInput></ion-input>

但这导致了同样的问题。

But that results in the same exact problem.

推荐答案

所以我想通了（感谢Ionic Slack）问题是什么。 Angular并不总是像我这样做的方式检测到变化。我可以创建一个新的期间列表实例（这样就可以检测到更改）或强制检测（手动）。我做了后者：

So I figured out (thanks to the Ionic Slack) what the problem was. Angular did not always detect changes the way I did this. I could either create a new instance of the periods list (so changes would be detected) or force changes to be detected (manually). I did the latter:

导入：

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

构造函数：

private cd: ChangeDetectorRef

在搜索功能结束时：

this.cd.detectChanges();

通过这种方式，它始终有效。

This way, it always works.

这篇关于在隐藏键盘之前，离子搜索栏不会搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！