时间戳

首页 > 解决方案 > 当离子搜索栏上没有文本时，列表应该隐藏吗？

ionic-framework - 当离子搜索栏上没有文本时，列表应该隐藏吗？

问题描述

我卡住了，请帮帮我

我正在使用 ion-searchbar ，我希望当搜索栏上没有文本时，必须隐藏列表但列表仍然显示 有人可以帮助我吗？

在 .html 文件中

    <ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
    <ion-list>
      <ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
        {{ item }}
      </ion-item>
    </ion-list>

在 .ts 文件中

  getItems(ev) { 
    // Reset items back to all of the items
    this.initializeItems();
    // set val to the value of the ev target
    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);
      })
    }
  }

标签： ionic-frameworkionic3

解决方案

您可以使用ngModel和ngIf：

<ion-searchbar [(ngModel)]="searchInput" (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="searchInput !== ''">
   <ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
        {{ item }}
   </ion-item>
</ion-list>

在 .ts 中：

public searchInput='';

或者
如果您的变量items在初始化时为空：

<ion-searchbar (ionInput)="getItems($event)" class="" style="background-color: #073262 !important" [showCancelButton]="shouldShowCancel" style="background:none!important;"></ion-searchbar>
<ion-list *ngIf="items && items.length">
   <ion-item *ngFor="let item of items" (click)="openNavDetailsPage(item)">
        {{ item }}
   </ion-item>
</ion-list>

在 .ts 中：

public items = [];

推荐阅读