Javascript 管道数据过滤中ngIF条件的角度估计

用于基于使用管道搜索的过滤-这工作正常

现在我必须根据搜索查询添加ngIf条件

如果没有结果，那么我必须显示另一个带有“无数据”文本的新div

<input type="text" [(ngModel)]="queryString" placeholder="Search to type">

<li *ngFor="let project of projects | FilterPipe: queryString ;>
{{project.project_name}} 
</li>

---

要在模板中使用

过滤器

管道的结果，可以在

as

关键字的帮助下创建局部变量

<li *ngFor="let project of (projects | FilterPipe: queryString) as results">
  {{project.project_name}} 
</li>

通过这种方式，我们扩展了

结果

变量的范围，当过滤的数据集为空时，我们可以轻松地使用它来显示

无数据

下面是一个关于的工作示例

<li *ngFor="let project of (projects | FilterPipe: queryString) as results">
  {{project.project_name}} 
</li>

<ul *ngIf="(projects | FilterPipe: searchQuery) as results">
  <li *ngFor="let project of results">
    {{project.project_name}} 
  </li>
  <span *ngIf="results.length === 0">No data</span>
</ul>