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

【问题标题】：Angular ngFor ngIF condition in data filtering by pipe管道数据过滤中的Angular ngFor ngIF条件
【发布时间】：2019-12-08 16:09:31
【问题描述】：

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

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

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

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

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

//管道

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

【问题讨论】：

标签： javascript angular pipe ngfor

【解决方案1】：

要在模板中使用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。

这是StackBlitz 上的一个工作示例。

【讨论】：