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

Question

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

Answer 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 的工作示例.