Angular ngFor ngIF 通过管道过滤数据的条件

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

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

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

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

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

//pipe

transform(value: any, input:any ): any {
    if(input){
      input = input.toLowerCase();
      return value.filter(function (el: any) {
        return el.project_name.toLowerCase().indexOf(input) > -1;
      })
    }
    return value;
  }

使用结果filter在模板中的管道中，您可以借助以下命令创建局部变量as关键词。

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

现在您可以在以下位置访问过滤管道的结果results多变的。但此局部变量的范围现在仅限于托管 HTML 元素及其子元素。我们可以通过稍微重写您的代码来解决这个问题。

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

这样我们就扩大了范围results变量，我们可以轻松地使用它来显示No Data当过滤后的数据集为空时。

这是一个工作示例堆栈闪电战 https://stackblitz.com/edit/angular-custom-fitler-pipe.