在隐藏键盘之前，离子搜索栏不会搜索 [英] Ionic search bar does not search until the keyboard is hidden
问题描述
我的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.
这篇关于在隐藏键盘之前，离子搜索栏不会搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
