如果在搜索栏中找不到结果，则显示错误消息

Question

我陷入了搜索问题。如果用户搜索的东西不在列表中，那么它应该显示错误消息。但就我而言，如果我在我的列表中搜索 "panadol" ，它将显示包含该词的列表，并将在不包含该词的列表中显示错误消息。

Searchbar.html:

<ion-searchbar (keyup)="searching()" placeholder="{{'search' | translate}}" [(ngModel)]="terms"></ion-searchbar>

<div *ngIf="terms == undefined || (terms.length > 1 && !((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) || infectiousdiseasesList.DiseaseName_Ar.includes(terms))) )">
{{'noItemsFound' | translate}}
</div>

<span *ngFor="let infectious of infectiousdiseasesList;let i = index">
  <ion-row
    *ngIf=" (infectious.DiseaseCategoryId == 4) && (infectious.DiseaseName_En.toLowerCase().includes(terms.toLowerCase()) || infectious.DiseaseName_Ar.includes(terms))"
    col-12>
    <!-- (infectious.DiseaseCategoryId == 4) && -->
    <ion-col col-6>
      <ion-item no-lines>
        <ion-label *ngIf="this.lang == 'en'">{{infectious.DiseaseName_En}}</ion-label>
        <ion-label *ngIf="this.lang == 'ar'">{{infectious.DiseaseName_Ar}}</ion-label>
        <ion-checkbox [(ngModel)]="infectious.checked" (ionChange)="selected(infectious,i, $event)" color="danger">
        </ion-checkbox>
      </ion-item>
    </ion-col>
  </ion-row>
</span>

Searchbar.ts:

this.storage.get('infectiousDiseases').then(res => {
    for(let infectious of res){
      if(infectious.DiseaseCategory.Id==4){
        this.infectiousdiseasesList.push(infectious);
      }
    }
 });

Now if you see the picture there is a list shown there. If I type "as" in the searchbar then the list containing "as" words will be shown and the list that does not contain the searched word will shown error message. In my case, I am getting error message and result too.

Answer 1

只需在结果显示中添加一个相反的条件即可。

<div *ngIf="terms == undefined || (terms.length > 1 && !((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) || infectiousdiseasesList.DiseaseName_Ar.includes(terms))) )">
{{'noItemsFound' | translate}}
</div>
<div *ngIf="terms != undefined && ((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) && infectiousdiseasesList.DiseaseName_Ar.includes(terms))">
<span *ngFor="let infectious of infectiousdiseasesList;let i = index">
  <ion-row
    *ngIf=" (infectious.DiseaseCategoryId == 4) && (infectious.DiseaseName_En.toLowerCase().includes(terms.toLowerCase()) || infectious.DiseaseName_Ar.includes(terms))"
    col-12>
    <!-- (infectious.DiseaseCategoryId == 4) && -->
    <ion-col col-6>
      <ion-item no-lines>
        <ion-label *ngIf="this.lang == 'en'">{{infectious.DiseaseName_En}}</ion-label>
        <ion-label *ngIf="this.lang == 'ar'">{{infectious.DiseaseName_Ar}}</ion-label>
        <ion-checkbox [(ngModel)]="infectious.checked" (ionChange)="selected(infectious,i, $event)" color="danger">
        </ion-checkbox>
      </ion-item>
    </ion-col>
  </ion-row>
</span>

或者简单的方法：

<ion-searchbar (keyup)="searching()" placeholder="{{'search' | translate}}" [(ngModel)]="terms"></ion-searchbar>

    <div *ngIf="terms == undefined || (terms.length > 1 && !((infectiousdiseasesList.DiseaseCategoryId == 4) && (infectiousdiseasesList.DiseaseName_En.toUpperCase().includes(terms.toUpperCase()) || infectiousdiseasesList.DiseaseName_Ar.includes(terms))) )">
    {{'noItemsFound' | translate}}
    </div>
    <div *ngIf="terms != undefined && infectiousdiseasesList">
    <span *ngFor="let infectious of infectiousdiseasesList;let i = index">
      <ion-row
        *ngIf=" (infectious.DiseaseCategoryId == 4) && (infectious.DiseaseName_En.toLowerCase().includes(terms.toLowerCase()) || infectious.DiseaseName_Ar.includes(terms))"
        col-12>
        <!-- (infectious.DiseaseCategoryId == 4) && -->
        <ion-col col-6>
          <ion-item no-lines>
            <ion-label *ngIf="this.lang == 'en'">{{infectious.DiseaseName_En}}</ion-label>
            <ion-label *ngIf="this.lang == 'ar'">{{infectious.DiseaseName_Ar}}</ion-label>
            <ion-checkbox [(ngModel)]="infectious.checked" (ionChange)="selected(infectious,i, $event)" color="danger">
            </ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    </span>
</div>

和：

    this.storage.get('infectiousDiseases').then(res => {
      if(res){
         for(let infectious of res){
          if(infectious.DiseaseCategory.Id==4){
            this.infectiousdiseasesList.push(infectious);
          }
        }
      } else {
          this.infectiousdiseasesList = []; // [] or maybe null 
      }     
 });

如果在搜索栏中找不到结果，则显示错误消息

Display error message if no result found in search bar

ionic3

angular