空结果的角度"include"

Question

我想

在 ngFor 循环中只显示 1 次 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>

我已经尝试过其他条件，但 for 循环为每个条目迭代它。 期待一个好的解决方案。

Answer 1

用<ng-template>换行：

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

这种方法将清楚地确定在空数据和非空数据的情况下应该做什么。

Answer 2

你不能打破 *ngFor。

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

• 在代码隐藏中筛选新数据
• 使用管道

Answer 3

请尝试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>