Отображать сообщение об ошибке, если в строке поиска не найдено результатов

Question

Я застрял в поисковой проблеме. Если пользователь ищет что-то, чего нет в списке, он должен отобразить сообщение об ошибке. Но в моем случае, если я буду искать «панадол» в моем списке, он отобразит список, содержащий это слово, и отобразит сообщение об ошибке в списке, который не содержит этого слова.

Панель поиска. 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);
      }
    }
 });

Теперь, если вы видите картинку, там отображается список. Если я введу «как» в строке поиска, то будет показан список, содержащий слова «как», а в списке, который не содержит искомого слова, появится сообщение об ошибке. В моем случае я получаю сообщение об ошибке и результат тоже.

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