angular 中未找到搜索结果时如何隐藏某些内容

Question

在我的主页上有一个搜索栏和一个用户最喜欢的卡片列表。仅当初始浏览器加载时没有最喜欢的卡片，并且当用户删除所有他们最喜欢的卡片时，它才会显示横幅“添加最喜欢的...”。

我现在遇到的问题是当我在 search-bar 上搜索内容时显示横幅，但没有找到收藏的卡片。我该如何解决？如果找不到搜索结果，我不想显示我的横幅。

如果我改为 favorites.size == 0，那么当浏览器加载或用户移除所有卡片时，横幅根本不会显示。

  <div class="input">
    <form class="search-form">
      <input #searchValue id="input-field" class="input-field" type="search"
        name="insightSearchFilter" (ngModelChange)="filterChanged($event)" [formControl]="inputCtrl"/>  
      <p class="hint" *ngIf="inputCtrl.value">
        <strong> {{ favorites?.length }} Search Result for </strong><em>"{{ inputCtrl?.value }}".</em>
        <strong> The Results listed below are exact matches for your query.</strong>
      </p>
    </form>
  </div>
  
  <div *ngIf="favorites">
    <div *ngIf="favorites.length > 0">
      <app-card-list [cards]="favorites"></app-card-list>
    </div>
    <div *ngIf="favorites.length == 0" class="empty-faves-container">
      <div class="add-faves-container">
        <div class="add-faves-ico"></div>
        <div class="text">Add a Favorite</div>
      </div>
    </div>
  </div>

Answer 1

因为您在 filterChanged 方法中过滤 this.favorites。您还应该对搜索文本进行检查以及长度检查。喜欢

(favorites.length == 0 && !(inputCtrl.value))

angular 中未找到搜索结果时如何隐藏某些内容

How to hide something when no search result found in angular

html

angular

typescript

angular-material

display