Question

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

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

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

只有在点击上方图片中的向下箭头按钮后，才会过滤/搜索＆＃34;结果显示。

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

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

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

修改

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

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

}

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

Video of working example

Video of not working example

编辑2：

我也尝试过这样的正常输入：

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

但这导致了同样的问题。

Answer 1

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

导入：

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

构造

private cd: ChangeDetectorRef

搜索功能结束时：

this.cd.detectChanges();

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

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

1 个答案: