Ionic的搜索栏不起作用

时间:2018-07-09 12:08:03

标签: typescript ionic3 searchbar

我正在尝试在Ionic中进行搜索,但它在底部显示了错误。 首先,我从API检索了一些数据,并希望对结果进行过滤。

以下是我的html,它显示了数据检索以及搜索栏

<ion-header>

 <ion-navbar color="toolcolor">
<ion-title>Doctor Appointments</ion-title>
<!--<ion-buttons color="toolcolor" end><button id="search" 
(click)="search()"><ion-icon name="search" color="light"></ion-icon></button> 
</ion-buttons> -->
 <ion-searchbar [(ngModel)]="ev" (ionInput)="getItems($ev)"></ion-searchbar>
 </ion-navbar>

 </ion-header>


    <ion-content padding> 

     <div class="card">
     <ion-item color="toolcolor">

     <ion-label color="light">Select Date</ion-label>
     <ion-datetime   displayFormat="MMM DD YYYY" [(ngModel)]="event.month" > 
    </ion-datetime>
    </ion-item>
    <br>
    <div *ngFor="let item of items">
    <button class="doc_appoint" (click)="patientdetails()">
     <ion-label id="pat_det">Time:{{ item.time }}</ion-label>
     <ion-label id="pat_det">Patient Name:</ion-label>
     <ion-label id="pat_det">Patient ID:{{ item.PatientId }}</ion-label>
    </button>
    <br><br><br><br><br><br>
    </div>
   </div>



   </ion-content>

我的ts,它显示了搜索栏功能 我不知道我在哪里弄错了

 getItems(ev) {
   this.show();
   var val = ev.target.value;
    if (val && val.trim() != '') {
    this.items = (this.items).filter((item) => {

    return ((item.PatientId).toLowerCase().indexOf(val.toLowerCase()) > -1);
    })
    }
    }

和我的错误 enter image description here

我不知道该如何克服。 欢迎任何建议。 预先感谢。

1 个答案:

答案 0 :(得分:0)

您不需要[(ngModel)]="ev",将其删除。

在功能getItems中,将签名从getItems(ev)更改为getItems(ev: any)