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

我陷入了搜索问题。如果用户搜索列表中不存在的内容，则应显示错误消息。但在我的例子中，如果我在我的列表中搜索“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>

---

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

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

---

如果出现错误，请输入传染病列表=[]你可以开始了。@JacopoSciampi我必须显示错误。如果我将删除html页面的检查，它将自动显示我不想要的空白页面。你的html很好。我想问题是，当你得到一个错误（比如

as

没有得到结果）时，你正确地显示了错误消息，但是列表没有被清除。这就是为什么您同时列出了消息和项目。因此，在您的ts代码中，当您发现该错误时，添加我在上面发布的那一行。在我的示例中，包含“as”的单词正在显示，不包含“as”的单词显示未找到任何项目消息。我希望如果任何单词包含“as”，那么错误消息不应显示。与我之前遇到的问题相同：（你能在stackblitz或某些IDE在线上发布你的项目吗？我可以检查错误。对不起，我不允许发布项目。你可以查看我描述中给出的链接，以查看剩下的唯一案例。

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