Angular 棱角；包括「；对于空结果

我想在一个ngFor循环中只显示一次HTML标记，其中ngIf条件为空结果

<div *ngFor="let ndata of newsData; let i= index" (click)="redirect(ndata?.url)">
      <div class="news-cont" *ngIf="ndata.title.toLowerCase().includes(searchParam.toLowerCase())">
       <div class="row">
         <div class="col-md-2">
           <img class="m-img" src="{{ndata?.imageurl}}">
         </div>
         <div class="col-md-10">
           <h5> <img class="ic-img" src="{{ndata?.source_info?.img}}"> {{ndata?.source_info?.name}}</h5>
           <h4> {{ndata?.title}}</h4>
           <h6><i class="pe pe-7s-clock"></i> {{ndata?.published_on * 1000 | date:'HH:mm | yyyy-MMM-dd'}} </h6>
           <hr>
           <p [innerHTML]="ndata?.body">  </p>
           <p><i class="pe pe-7s-ribbon"></i>  <span class="categories-tag">Catergories <span>{{ndata?.categories}}</span></span> </p>
         </div>
       </div>
      </div>
        <p ANYCONDITION > No Results</p>
      </div>

{{nda？.source_info？.name}
{{nda？.title}
{{nda？.出版于*1000 |日期：'HH:mm | yyyy-MMM-dd'}


类别{{nda？.categories}

无结果

我尝试过使用其他条件，但for循环会对每个条目进行迭代。

---

期待一个很好的解决方案。

您不能中断*ngFor

您必须在以下两者之间进行选择：

• 在代码隐藏中过滤新数据
• 使用管道
用

包裹：

<ng-template [ngIf]="something.length > 0" [ngIfElse]="noDataTemplate">
  <div *ngFor="let ndata of newsData; let i= index" (click)="ndata && redirect(ndata.url)">
    <!-- your code here -->
  </div>
</ng-template>

<ng-template #noDataTemplate>
  <div>No data to display</div>
</ng-template>


没有要显示的数据

此方法将清楚地确定在出现空数据和非空数据时应执行的操作。
请尝试
newsData.filter（a=>a.title.toLowerCase（）.includes（searchParam.toLowerCase（））>-1）

所以你的html应该是这样的

<div *ngFor="let ndata of newsData.filter(a=>a.title.toLowerCase().includes(searchParam.toLowerCase()) > -1); let i= index" (click)="redirect(ndata?.url)">
   <div class="news-cont">
       <div class="row">
         <div class="col-md-2">
           <img class="m-img" src="{{ndata?.imageurl}}">
         </div>
         <div class="col-md-10">
           <h5> <img class="ic-img" src="{{ndata?.source_info?.img}}"> {{ndata?.source_info?.name}}</h5>
           <h4> {{ndata?.title}}</h4>
           <h6><i class="pe pe-7s-clock"></i> {{ndata?.published_on * 1000 | date:'HH:mm | yyyy-MMM-dd'}} </h6>
           <hr>
           <p [innerHTML]="ndata?.body">  </p>
           <p><i class="pe pe-7s-ribbon"></i>  <span class="categories-tag">Catergories <span>{{ndata?.categories}}</span></span> </p>
         </div>
       </div>
   </div>
   <p ANYCONDITION > No Results</p>
</div>


{{nda？.source_info？.name}
{{nda？.title}
{{nda？.出版于*1000 |日期：'HH:mm | yyyy-MMM-dd'}


类别{{nda？.categories}

无结果
能否共享
新闻数据
和
搜索参数
？更好的方法是在
.ts
文件中过滤
新闻数据
。然后可以避免在
html
中使用
ngFor
。这是一种输入